一、Json数据交互介绍

客户端在向handler处理器发送请求时，有两种形式：

key=value形式

Json形式

1.key=value形式

在这里插入图片描述
使用key=value的形式，view请求handler时可以直接转换为handler中的对象类型。handler要将pojo响应给view时，就需要使用@ResponseBody注解来完成，该注解将pojo对象转换成Json对象响应给前端，方便前端操作。

2.Json形式

在这里插入图片描述
使用Json形式，view请求handler时使用@RequestBody注解将Json形式转换为pojo对象，方便后端操作；当handler要将pojo响应给view时，则使用@ResponseBody注解将pojo对象转换成Json形式响应给前端，方便前端操作。

二、测试Json数据交互

1.导入项目需要的jar包

Json包
在这里插入图片描述
jQuery文件

2.Json测试页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html,charset=utf-8"/>
	<title>Json测试页面</title>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jQuery-3.4.1.js"></script>
	<script type="text/javascript">
	
		//key=value格式方式
		function testJson1(){
			$.ajax({
				url:"${pageContext.request.contextPath}/json/testJson01.do",
				type:"post",
				data:"name=双笙&age=20",
				success:function(data){
					alert(data.name);
				}
			})
		}
		
		//Json格式
		function testJson2(){
			$.ajax({
				url:"${pageContext.request.contextPath}/json/testJson02.do",
				type:"post",
				//该请求头代表请求数据是Json格式
				contentType:"application/json;charset=utf-8",
				data:'{"name":"周冬雨","age":"18"}',
				success:function(data){
					alert(data.name);
				}
			})
		}
	</script>
  </head>
  
  <body>
    <button onclick="testJson1();">Json按钮1</button>
    <button onclick="testJson2();">Json按钮2</button>
  </body>
</html>

3.Handler处理器

package com.gql.upload;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.gql.pojo.User;

@Controller
@RequestMapping("json")
public class JsonController {
	
	@RequestMapping("testJson01")
	@ResponseBody
	public User JsonTest01(User user){
		return user;
	}
	
	@RequestMapping("testJson02")
	@ResponseBody
	public User JsonTest02(@RequestBody User user){
		System.out.println(user.getName());
		return user;
	}
}

4.pojo类

package com.gql.pojo;

public class User {

	private String name;
	private Integer age;
	//省略set与get方法
}

5.Json数据交互测试

当点击按钮1，view层通过key=value的形式请求到handler，handler通过@ResponseBody注解将pojo转换为Json形式再返回给view层，成功在view层接收到了name。在这里插入图片描述
当点击按钮2，view层通过Json的形式请求到handler(使用@RequestBody转换为pojo对象)，handler通过@ResponseBody注解将pojo转换为Json形式再返回给view层，成功在view层接收到了name。