SpringMVC返回数据到页面的方法

青旅半醒 2021-08-24 21:22 827阅读 0赞

在JavaWeb项目中许多项目会使用SpringMVC作为开发框架，下面将介绍几种将后台Controller控制器执行的结果返回到页面的方法。

首先创建示例中需要用到的类、公共方法和结果显示页面。

（1）创建用户信息模型类（UserModel.java）。

package com.pjb.ssm.model;
    
    /**
     * 用户信息模型类
     *
     * @author pan_junbiao
     **/
    public class UserModel
    {
        private int userId; //用户ID
        private String userName; //用户名称
        private String blogUrl; //博客地址
        private String remark; //备注信息
    
        //省略getter与setter方法...
    }

（2）编写获取用户信息方法，模拟Service层的业务。

/**
     * 获取用户信息（模拟Service层的业务）
     */
    public UserModel getUserDetail()
    {
        UserModel userModel = new UserModel();
        userModel.setUserId(1);
        userModel.setUserName("pan_junbiao的博客");
        userModel.setBlogUrl("https://blog.csdn.net/pan_junbiao");
        userModel.setRemark("您好，欢迎访问 pan_junbiao的博客");
        return userModel;
    }

（3）创建user文件夹，并在该文件夹中创建结果显示页面（user\_info.jsp）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>用户信息</title>
        <meta name="author" content="pan_junbiao的博客">
        <style>
            table {
                border-collapse: collapse;
            }
    
            table, table tr th, table tr td {
                border: 1px solid #000000;
                padding: 5px 10px;
            }
        </style>
    </head>
    <body>
    <table align="center">
        <caption>用户信息</caption>
        <tr>
            <th>用户编号</th>
            <td>${userModel.userId}</td>
        </tr>
        <tr>
            <th>用户姓名</th>
            <td>${userModel.userName}</td>
        </tr>
        <tr>
            <th>博客地址</th>
            <td>${userModel.blogUrl}</td>
        </tr>
        <tr>
            <th>备注信息</th>
            <td>${userModel.remark}</td>
        </tr>
    </table>
    </body>
    </html>

# 1、使用Model/ModelMap对象 #

SpringMVC有一些默认支持的类型，这些类型可以直接在Controller类的方法中定义，在参数绑定的过程中遇到该种类型就直接进行绑定。HttpServletRequest可以通过request对象获取请求信息；对于Model/ModelMap，其中Model是一个接口，ModelMap是一个接口实现，它的作用就是将model数据填充到request域。

编写后台Controller控制器执行方法，使用Model保存数据结果。

/**
     * 获取用户信息
     *
     * @author pan_junbiao
     */
    @RequestMapping(value = "/getUserModel", method = RequestMethod.GET)
    public String getUserModel(Model model)
    {
        //获取用户信息（模拟Service层的业务）
        UserModel userModel = getUserDetail();
    
        //将用户信息保存到Model对象中
        model.addAttribute("userModel", userModel);
    
        //返回页面
        return "/user/user_info.jsp";
    }

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70][]

# 2、使用ModelAndView对象 #

使用ModelAndView类用来存储处理完后的结果数据，以及显示该数据的视图。从名字上看ModelAndView中的Model代表模型，View代表视图，这个名字就很好地解释了该类的作用。业务处理器调用模型层处理完用户请求后，把结果数据存储在该类的model属性中，把要返回的视图信息存储在该类的view属性中，然后让该ModelAndView返回该SpringMVC框架。框架通过调用配置文件中定义的视图解析器，对该对象进行解析，最后把结果数据显示在指定的页面上。

/**
     * 获取用户信息
     *
     * @author pan_junbiao
     */
    @RequestMapping(value = "/getUserModel", method = RequestMethod.GET)
    public ModelAndView getUserModel()
    {
        //获取用户信息（模拟Service层的业务）
        UserModel userModel = getUserDetail();
    
        //创建返回结果ModelAndView对象
        ModelAndView modelAndView = new ModelAndView();
        //相当于request的setAttribut方法
        modelAndView.addObject("userModel", userModel);
        //指定视图
        modelAndView.setViewName("/user/user_info.jsp");
        //返回结果
        return modelAndView;
    }

# 3、使用HttpServletRequest对象 #

HttpServletRequest对象提供的setAtribute(String name, Object object)方法可以将数据保存到request范围内的变量中。

/**
     * 获取用户信息
     *
     * @author pan_junbiao
     */
    @RequestMapping(value = "/getUserModel", method = RequestMethod.GET)
    public String getUserModel(HttpServletRequest request)
    {
        //获取用户信息（模拟Service层的业务）
        UserModel userModel = getUserDetail();
    
        //将用户信息保存到HttpServletRequest对象中
        request.setAttribute("userModel", userModel);
    
        //返回页面
        return "/user/user_info.jsp";
    }

# 4、返回String字符串结果 #

SpringMVC返回字符串结果，并解决中文乱码问题。

/**
     * SpringMVC返回字符串结果，并解决中文乱码问题
     *
     * @author pan_junbiao
     */
    @RequestMapping(value = "/getMessage", produces = {"text/html;charset=UTF-8;", "application/json;"})
    @ResponseBody
    public String getMessage()
    {
        return "您好，欢迎访问 pan_junbiao的博客";
    }

# 5、返回JSON格式数据 #

SpringMVC的Controller控制器方法，需要返回JSON格式的数据，需要使用@RequestBody注解。@RequestBody注解的特点就是，根据请求参数的Content-Type决定是否将相关格式转换至包装类，如果Content-Type是目标类型，就进行转换。这里转换的是JSON数据，所有要求将前端请求的Content-Type指定为“application/json”类型，而普通key/value请求参数的Content-Type默认为“application/x-www-form-urlencoded”类型。

/**
     * 获取JSON格式的登录用户信息
     *
     * @author pan_junbiao
     */
    @RequestMapping(value = "getLoginUser", method = RequestMethod.POST)
    @ResponseBody
    public UserModel getLoginUser(@RequestBody UserParam userParam)
    {
        UserModel userModel = null;
        //判断登录信息
        if (userParam.getUserName().equals("pan_junbiao的博客") && userParam.getPassword().equals("123456"))
        {
            //获取用户信息
            userModel = new UserModel();
            userModel.setUserId(1);
            userModel.setUserName("pan_junbiao的博客");
            userModel.setBlogUrl("https://blog.csdn.net/pan_junbiao");
            userModel.setRemark("您好，欢迎访问 pan_junbiao的博客");
        }
        //返回结果
        return userModel;
    }

## 5.1 执行方法一：使用ajax请求 ##

使用JQuery提供的Ajax功能请求，关键代码：

//加载数据钮事件
    $("#btnLoad").click(function () {
        //请求参数对象
        var params = {};
        params.userName = "pan_junbiao的博客";
        params.password = "123456";
     
        //执行Ajax请求
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/json/getLoginUser.action",
            dataType: "json",
            contentType: "application/json; charset=UTF-8",
            data: JSON.stringify(params),
            success: function (result) {
                //绑定数据
                $("#td_userId").html(result.userId);
                $("#td_userName").html(result.userName);
                $("#td_blogUrl").html(result.blogUrl);
                $("#td_remark").html(result.remark);
            }
        });
    });

## 5.2 执行方法二：使用Postman工具 ##

第二种执行方法，使用Postman工具进行测试。

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70]: /images/20210724/1b039e2fc0934a82946fc9d97627ad11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 1]: /images/20210724/529e9e023d96424a9661c94eb36bc8c2.png