springboot——动态页面返回页面同时传递数据到前端的方式

最新推荐文章于 2024-04-16 21:29:49 发布

知北行

最新推荐文章于 2024-04-16 21:29:49 发布

阅读量8k

点赞数 3

分类专栏： Spring Java 文章标签： java

本文链接：https://blog.csdn.net/qq_35077107/article/details/107870652

版权

Java 同时被 2 个专栏收录

117 篇文章 1 订阅

订阅专栏

Spring

54 篇文章 1 订阅

订阅专栏

方式一：通过Model

后端代码:

    @GetMapping("/test")
    public String hello(@RequestParam(value = "type",required = false) String type, Model model){
        //封装要显示到视图中的数据
        model.addAttribute("msg","吾等为何而战");
        return "test";
    }

方式二：通过ModelAndView

    @GetMapping("/hello")
    public ModelAndView getIndex(@RequestParam(value = "type",required = false) String type){
        //返回一个模型视图对象
        ModelAndView mv = new ModelAndView();
        mv.addObject("msg",type);
        mv.setViewName("index");//返回页面为index
        return mv;
    }

方式三：通过通过ModelMap

@GetMapping("/hello")
public String hello(@RequestParam("username") String name, ModelMap model){
    //封装要显示到视图中的数据
    //相当于req.setAttribute("name",name);
    model.addAttribute("name",name);
    System.out.println(name);
    return "hello";
}

方式四：使用map传递

@GetMapping("/hello")
public String hello(@RequestParam("username") String name, Map<String,Object> map){
    //封装要显示到视图中的数据
    map.put("name",name);
    System.out.println(name);
    return "hello";
}

三种方式前端取值代码类似，下面是方式一对应的前端代码

前端代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="../static/js/jquery-1.4.4.min.js"></script>
</head>
<body>
<script th:inline="javascript">
    $(function () {
        var tt=[[${msg}]];//取值
        console.info(tt);

    })

</script>

<h1>testttt</h1>

</body>
</html>

前端结果：：
在这里插入图片描述

三者的区别
Model 只有寥寥几个方法只适合用于储存数据，简化了新手对于Model对象的操作和理解；
ModelMap 继承了 LinkedMap ，除了实现了自身的一些方法，同样的继承 LinkedMap 的方法和特性；
ModelAndView 可以在储存数据的同时，可以进行设置返回的逻辑视图，进行控制展示层的跳转。

参考：SpringMVC将数据显示到前端的三种方式
 Springboot+Thymeleaf通过JS获取Model传过来的对象的值，存储到Session中

知北行

关注

3
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
springboot——动态页面返回页面同时传递数据到前端的方式

方式一：通过Model后端代码: @GetMapping("/test") public String hello(@RequestParam(value = "type",required = false) String type, Model model){ //封装要显示到视图中的数据 model.addAttribute("msg","吾等为何而战"); return "test"; }方式二：通过ModelAndView
复制链接

扫一扫