一、Spring MVC 处理 AJAX 请求
Spring MVC 返回 JSON 格式数据
拷贝spring-mvc-crud项目，重命名为spring-mvc-ajax。Spring MVC 处理 json 格式的数据需要导入jackson相关依赖
<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.13.1</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.13.1</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.13.1</version> </dependency> 复制代码
添加依赖之后，要在Project Structure -> Artifacts 目录下把右侧的JAR包全都put到lib文件夹下 新增一个Controller并使用@RestController注解标注在该类上
@RestController public class AnotherController { @Autowired private EmployeeDao employeeDao; @RequestMapping(value = "/list_by_json") public Collection<Employee> listByJson(){ Collection<Employee> all = employeeDao.getAll(); return all; } } 复制代码
重新启动Tomcat，浏览器输入http://localhost:8080/list_by_json
浏览器中显示了所有员工的数据，并以JSON格式进行展示
@JsonIgnore
@JsonIgnore注解可以将某些属性在转换成JSON格式数据时进行忽略，在Employee实体类的Department属性上增加@JsonIgnore注解
public class Employee { // 其余代码保持不变 @JsonIgnore private Department department; } 复制代码
重新启动应用，浏览器输入http://localhost:8080/list_by_json
可以看出浏览器中展示的Employee数据忽略了Department属性，不再展示Department属性信息
@JsonFormat
添加@JsonFormat注解，指定输出的格式
public class Employee{ // 其余代码保持不变 @JsonFormat(pattern = "yyyy-MM-dd") private Date birth = new Date(); } 复制代码
重新启动应用，浏览器输入http://localhost:8080/list_by_json
时间显示的格式即为@JsonFormat注解指定的格式，而不加@JSONFormat注解默认为时间戳戳格式，如下图所示
Spring MVC 处理 AJAX 请求
在index.jsp同级目录下新增一个页面emps.jsp，使用ajax请求获取所有员工并显示在页面上
<%@page import="java.util.Date"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!--head标签内容省略--> <body> <%=new Date() %> <a href="${ctp }/list_by_json">ajax获取所有员工</a><br/> <div> </div> <script type="text/javascript"> $("a:first").click(function(){ //1、发送ajax获取所有员工 $.ajax({ url:"${ctp}/list_by_json", type:"GET", success:function(data){ //console.log(data); $.each(data,function(){ var empInfo = this.lastName+"-->"+this.birth+"--->"+this.gender; $("div").append(empInfo+"<br/>"); }); } }); return false; }); </script> </body> </html> 复制代码
重新启动应用，浏览器输入http://localhost:8080/emps.jsp， 点击页面的超链接，即可获取所有员工的数据
@RequestBody注解
@RequestBody注解可以直接获得请求体，在AnotherController中增加一个方法postReq，用来处理前端的post请求
@RequestMapping("/post_request") public String postReq(@RequestBody String user){ System.out.println("请求体：" + user); return "success"; } 复制代码
新增一个页面post.jsp，发送post表单请求到postReq方法
<h2>使用表单发送POST请求</h2> <div> <form action="/post_request" method="post"> <input name="username" value="stark"> <input name="password" value="123456"> <input type="submit"> </form> </div> 复制代码
重新启动应用，浏览器进入到http://localhost:8080/post.jsp， 点击提交按钮
请求提数据被打印在控制台中
在post.jsp页面增加一个ajax的post请求
<h2>使用Ajax发送JSON格式的POST请求</h2> <a href="/post_request">发送</a> <script type="text/javascript"> $("a:first").click(function(){ var emp = {lastName:"Banner", email:"banner@gmail.com",gender:0}; var empStr = JSON.stringify(emp); //1、发送ajax获取携带JSON格式数据 $.ajax({ url:"${ctp}/post_request", type:"POST", data:empStr, contentType: "application/json", success:function(data){ //console.log(data); alert(data); } }); return false; }); </script> 复制代码
浏览器发送http://localhost:8080/post.jsp ，点击发送超链接
浏览器发送的请求体为JSON格式的数据
@RequestBody注解将JSON格式数据转换成Employee实体类对象
