响应数据和结果视图
# 80.响应数据和结果视图
控制器返回的数据类型有很多,不仅仅是字符串,本文就来讲解关于返回值的分类
# 环境准备
为了将接下来的案例,我们可以将 java 目录下的代码都删掉,并且将 JSP 也删掉:
同时,springmvc.xml 文件中,类型转换器也可以删掉,此时文件的配置如下:
<!-- 开启注解扫描 -->
<context:component-scan base-package="com.peterjxl"/>
<!-- 视图解析器 -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/"/> <!-- 前缀,可以理解为是文件的目录 -->
<property name="suffix" value=".jsp"/> <!-- 后缀,可以理解为是文件后缀名 -->
</bean>
<!-- 开启SpringMVC注解驱动 -->
<mvc:annotation-driven/>
</beans>
2
3
4
5
6
7
8
9
10
11
12
然后我们新建 index.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
2
3
4
5
6
7
8
9
webapp/WEB-INF/pages/success.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h3>执行成功</h3>
</body>
</html>
2
3
4
5
6
7
8
9
10
# 返回字符串
先来演示下返回字符串的情况。
新建 webapp/response.jsp 页面:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<a href="user/testString">testString</a>
</body>
</html>
2
3
4
5
6
7
8
9
10
新建控制器类:
@RequestMapping("/testString")
public String testString() {
System.out.println("testString() is running...");
return "success";
}
2
3
4
5
此时我们重启,并测试,可以看到能正常跳转。
我们在实际开发中,经常遇到的需求是从数据库中查询出数据,然后返回给前端;为了简单,我们这里就不查询数据库,而是模拟
新建 User 类。注:自行生成其余方法
package com.peterjxl.domain;
import java.io.Serializable;
public class User implements Serializable {
private String username;
private String password;
private Integer age;
}
2
3
4
5
6
7
8
修改控制器方法
@RequestMapping("/testString")
public String testString(Model model) {
System.out.println("testString() is running...");
// 模拟从数据库中查询出User对象
User user = new User();
user.setUsername("王小美");
user.setPassword("123");
user.setAge(18);
model.addAttribute("user", user);
return "success";
}
2
3
4
5
6
7
8
9
10
11
修改 success.jsp:在头部设置 EL 表达式属性为 false,然后去除 user 的属性:
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h3>执行成功</h3>
${user.username}
${user.password}
</body>
</html>
2
3
4
5
6
7
8
9
10
11
测试:
# 返回值是 void
新增超链接:
<a href="user/testVoid">testVoid</a>
新增控制器方法:
@RequestMapping("/testVoid")
public void testVoid(Model model) {
System.out.println("testVoid() is running...");
}
2
3
4
当我们没有返回值的时候,直接点击超链接,是会报错 404 的。虽然方法是执行了(有打印 testVoid() is running...
)
可以看到其报错 /WEB-INF/pages/user/testVoid.jsp 未找到,也就是说默认值是两个路径拼接起来的 JSP 页面。那要怎么解决呢?我们可以用 request 对象转发请求:
@RequestMapping("/testVoid")
public void testVoid(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("testVoid() is running...");
request.getRequestDispatcher("/WEB-INF/pages/success.jsp").forward(request, response);
}
2
3
4
5
注意,我们自己转发的时候,是不会去帮我们调用视图解析器的,因此得写完整的文件路径。
除此之外,还可以用重定向,此时会重新发一次请求,也就是浏览器会重新请求一个新的路径,此时就视图解析器就起作用了:
@RequestMapping("/testVoid")
public void testVoid(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("testVoid() is running...");
response.sendRedirect(request.getContextPath() + "/index.jsp");
}
2
3
4
5
还有一种情况,方法中直接输出内容给浏览器:
@RequestMapping("/testVoid")
public void testVoid(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("testVoid() is running...");
// 解决中文乱码
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println("你好, SpringMVC!");
}
2
3
4
5
6
7
8
9
# 返回值是 ModelAndView 对象
ModelAndView 对象是 Spring 提供的一个对象,其相当于是 Model + view。
例如,我们返回字符串的时候,是设置了一个 Model,然后返回一个静态资源文件名:
@RequestMapping("/testString")
public String testString(Model model) {
System.out.println("testString() is running...");
// 模拟从数据库中查询出User对象
User user = new User();
user.setUsername("王小美");
user.setPassword("123");
user.setAge(18);
model.addAttribute("user", user);
return "success";
}
2
3
4
5
6
7
8
9
10
11
而使用 ModelAndView 可以一步到位,在 ModelAndView 里设置 Model,然后再设置静态资源的文件,然后返回 ModelAndView 对象。
其实返回字符串的时候,其底层也是返回一个 ModelAndView 对象。
下面我们来演示下:
@RequestMapping("/testModelAndView")
public ModelAndView testModelAndView() {
System.out.println("testModelAndView() is running...");
// 模拟从数据库中查询出User对象
User user = new User();
user.setUsername("咕噜咕噜滚下山真君");
user.setPassword("123");
user.setAge(18);
ModelAndView mv = new ModelAndView();
mv.addObject("user", user);
mv.setViewName("success");
return mv;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
ModelAndView 中有一个成员变量是 ModelMap
类型的,因此存入到 ModelAndView 后,相当于存入到了 ModelMap,部分源码如下:
public class ModelAndView {
@Nullable
private ModelMap model;
public ModelMap getModelMap() {
if (this.model == null) {
this.model = new ModelMap();
}
return this.model;
}
public ModelAndView addObject(String attributeName, Object attributeValue) {
this.getModelMap().addAttribute(attributeName, attributeValue);
return this;
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
新建超链接
<a href="user/testModelAndView">ModelAndView</a>
重启,访问并测试,可以看到能正常跳转,success.jsp 也正常显示了数据
# SpringMVC 框架提供的转发和重定向
除了使用原生的 Servlet API 转发和重定向,SpringMVC 也提供了。
新增超链接:
<a href="user/testForward">testForward</a>
<a href="user/testRedirect">testRedirect</a>
2
新增两个控制器:注意转发的时候,需要写完整的路径。而重定向的时候,我们没有写完整的项目名,这是因为 SpringMVC 帮我们加上了。
@RequestMapping("/testForward")
public String testForward() {
System.out.println("testForward() is running...");
return "forward:/WEB-INF/pages/success.jsp";
}
@RequestMapping("/testRedirect")
public String testRedirect() {
System.out.println("testRedirect() is running...");
return "redirect:/index.jsp";
}
2
3
4
5
6
7
8
9
10
11
重启,并测试,可以看到正常跳转。
# ResponseBody 响应 JSON 数据
之前我们都是跳转或转发一个 JSP 页面给浏览器,但有时候浏览器是发送 Ajax 请求,此时我们需要响应数据,而不是页面。
# 引入 JQuery
为了方便,我们引入 JQuery,我们在 webapp 目录下新建 js 文件夹,然后放入 JQuery.js。读者可以从我的源码中获取。
然后我们在 response.jsp 文件中引入:
<head>
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
2
3
4
然后我们新增一个按钮,并绑定事件:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
alert("王小美")
})
})
</script>
</head>
<body>
<button id="btn">发送Ajax</button>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
此时我们重启,并点击按钮,会发现没有弹框;这是因为我们配置了前端控制器,当请求 JQuery 的资源,也会被拦截。因此我们得配置,不拦截静态资源。
我们在 springmvc.xml 文件中配置:
<!-- 前端控制器,哪些静态资源不拦截 -->
<mvc:resources mapping="/js/**" location="/js/" />
2
后续开发中,我们也可以配置 css 和图片不被拦截:
<mvc:resources location="/images/" mapping="/images/**"/> <!-- 图片 -->
<mvc:resources location="/css/" mapping="/css/**"/> <!-- 样式 -->
2
此时我们重新点击按钮,是会有弹框的。
# 发送 Ajax 请求
下面我们来配置发送 Ajax 请求:修改下方法,发送一个 JSON 的字符串
$(function () {
$("#btn").click(function () {
$.ajax({
url:"user/testAjax",
contentType:"application/json;charset=UTF-8", // 发送的数据类型
data: '{"username":"zhangsan","password":"123", "age":18}',
dataType:"json", // 服务器返回的数据类型
type:"post",
success:function (data) {
alert(data.username + data.age);
}
})
})
})
2
3
4
5
6
7
8
9
10
11
12
13
14
新增控制器方法:
@RequestMapping("/testAjax")
public void testAjax(@RequestBody String body) {
System.out.println("testAjax() is running...");
System.out.println(body);
}
2
3
4
5
此时打印的是:
{"name":"zhangsan","password":"123", "age":18}
# 将 JSON 转换为 JavaBean 对象
我们想要将发送过来的数据,转换为 JavaBean 对象,要怎么做呢?其实 SpringMVC 已经帮我们做好了。
我们先引用 Jackson 的依赖:用来将对象转换 JSON,或者 JSON 转对象
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.9.0</version>
</dependency>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
然后我们将方法参数改为 User 对象:
@RequestMapping("/testAjax")
public void testAjax(@RequestBody User user) {
System.out.println("testAjax() is running...");
System.out.println(user);
}
2
3
4
5
那我们如何响应 JSON 数据呢?只需加上@Response 注解,然后返回一个 User 对象即可:
@RequestMapping("/testAjax")
@ResponseBody
public User testAjax(@RequestBody User user) {
System.out.println("testAjax() is running...");
System.out.println(user);
// 做响应,模拟查询数据库
user.setUsername("王小美");
user.setAge(19);
return user;
}
2
3
4
5
6
7
8
9
10
11
比起之前,自己拿到 user 对象转换成 JSON,方便很多。然后我们进行测试,可以看到 IDEA 能打印出对象,并且浏览器能正常接受到数据
# 源码
本项目已将源码上传到 GitHub (opens new window) 和 Gitee (opens new window) 上。并且创建了分支 demo7,读者可以通过切换分支来查看本文的示例代码。