共计 4690 个字符，预计需要花费 12 分钟才能阅读完成。
前后端的数据交互，除了通过 form 表单进行提交外，也可以通过 ajax 向后端传递和接收 json 格式数据（这种方式可以实现请求数据和页面分离）。本文将总结一下在 Spring MVC 中接收和响应 json 数据的几种方式。
准备步骤：1. 导入 json 相关框架的依赖（比如 jackson）。2.spring mvc 的 controller 方法正常写，如果需要响应 json，增加 @responsebody 注解。3. 在接受 json 对应的输入参数前，加上 @RequestBody 注解。服务端接收 json 数据还原为 java 对象，称为反序列化，反之，将 java 对象作为响应转换为 json 数据发回给客户端，称为序列化。
注意：因为要使用 ajax，所有一定要引入 jQuery，切记！
jackson maven 依赖:
<!– jackson 依赖 –>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.7.0</version>
</dependency>
一、以实体类接收
背景：当 ajax 传递的参数较多时，采用参数名匹配的方法不太方便。如果后台有对应的实体类，这时可以选择在客户端将数据封装为 json 格式传递给后台，后台用对应的实体类进行接收。
客户端：
<button onclick=”clickMe()”> 点我 </button>
<script>
function clickMe() {
$.ajax({
type : ‘POST’,
url : “acceptJsonByEntity”,
contentType : “application/json;charset=utf-8”,
// 如果想以 json 格式把数据提交到后台的话，JSON.stringify()必须有，否则只会当做表单提交
data : JSON.stringify({
“bookId” : 1,
“author” : “Jack”
}),
// 期待返回的数据类型
dataType : “json”,
success : function(data) {
var bookId = data.bookId;
var author = data.author;
alert(“success:” + bookId+’,’+author);
},
error : function(data) {
alert(“error” + data);
}
});
</script>
@responseBody 注解是将 controller 的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到 response 对象的 body 区，通常用来返回 JSON 数据或者是 XML。@RequestBody 注解常用来处理 content-type 不是默认的 application/x-www-form-urlcoded 编码的内容。一般情况下来说常用其来处理 application/json 类型。
Controller:
@Controller
public class PassJsonParam {
@RequestMapping(value=”acceptJsonByEntity”,method = RequestMethod.POST)
@ResponseBody
public Book acceptJsonByEntity(@RequestBody Book book, HttpServletRequest request){
System.out.println(“ 当前 http 请求方式为:”+request.getMethod());
System.out.println(“bookId=”+book.getBookId()+”, author=”+book.getAuthor());
return book;
}
}
控制台输出：当前 http 请求方式为:POST bookId=1, author=Jack
客户端（弹窗）：success:1,Jack
如果 Controller 中的所有方法都需要返回 json 格式数据，可以使用 @RestController 注解。@RestController = @Controller + @ResponseBody
Controller（上面的 Controller 可以用下面的替换）:
@RestController
public class PassJsonParam {
@RequestMapping(value=”acceptJsonByEntity”,method = RequestMethod.POST)
public Book acceptJsonByEntity(@RequestBody Book book, HttpServletRequest request){
System.out.println(“ 当前 http 请求方式为:”+request.getMethod());
System.out.println(“bookId=”+book.getBookId()+”, author=”+book.getAuthor());
return book;
}
}
注意：使用了 @RestController 注解后，Controller 的方法无法再返回 jsp 页面或者 html，配置的视图解析器也不会起作用。
二、以 map 方式接收
背景：前台向后台发送 ajax 请求并且携带很多参数，而后台并没有对应的实体类进行接收又该如何处理呢？最常见的就是表单，这里可以考虑使用 map 来解决。因为 map 的数据结构为 key-value 形式，所以我们可以遍历搜索框表单，将表单的 name 作为 map 的 key, 表单的 value 作为 map 的 value。
客户端：
<form id=”bookForm”>
<input type=”text” name=”bookName” id=”bookName”>
<input type=”text” name=”author” id=”author” >
<button onclick=”submitForm(event)”> 提交 </button>
</form>
<script>
function submitForm(event) {
// 阻止 form 默认事件
event.preventDefault();
// 得到搜索框数据
var map = new Map();
$(“#bookForm input”).each(function () {
var value = $(this).val(); //input 值
var name = $(this).attr(‘name’);
map.set(name,value);
})
//Map 转为 Json 的方法
var obj= Object.create(null);
for (var [k,v] of map) {
obj[k] = v;
}
$.ajax({
type: ‘POST’,
contentType:’application/json’,
url: “acceptJsonByMap”,
data: JSON.stringify(obj),
dataType: ‘json’,
success: function (data) {
var bookName = data.bookName;
var author = data.author;
alert(“bookName =”+bookName+”; author=”+author);
},
error: function (data) {
alert(“ 失败啦 ”);
}
});
}
</script>
Controller:
@RequestMapping(value=”acceptJsonByMap”)
@ResponseBody
public Map<String,Object> acceptJsonByMap(@RequestBody Map<String,Object> paramsMap, HttpServletRequest request){
System.out.println(“ 当前 http 请求方式为:”+request.getMethod());
System.out.println(paramsMap);
return paramsMap;
}
控制台输出：当前 http 请求方式为:POST {bookName=Love, author=Frank}
客户端（弹窗）：bookName =Love; author=Frank
三、以 list 方式接收(以 json 数组形式传递)
客户端：
<button onclick=”clickHere()”>clickHere</button>
<script>
function clickHere() {
var params1 = {
“bookId”:”123″,
“author”:”Rose”
};
var params2 = {
“bookId”:”321″,
“author”:”Jack”
};
var list = [];
list.push(params1);
list.push(params2);
$.ajax({
type: ‘POST’,
contentType:’application/json’,
url: “acceptJsonByList”,
data: JSON.stringify(list),
dataType: ‘json’,
success: function (data) {
for (let i = 0; i < data.length; i++) {
var bookId = data[i].bookId;
var author = data[i].author;
alert(“bookId =”+bookId+”; author=”+author);
}
},
error: function (data) {
alert(“ 失败啦 ”);
}
});
}
</script>
注意：传递到后端时,list 应为 [{ key1 : value1}{key2 : value2} ] 的 json 格式数据，否则可能会出现 Json parse error 错误。
Controller:
@RequestMapping(value=”acceptJsonByList”)
@ResponseBody
public List<Book> acceptJsonByList(@RequestBody List<Book> book, HttpServletRequest request){
System.out.println(“ 当前 http 请求方式为:”+request.getMethod());
System.out.println(book);
return book;
}
注意：这里需要 Book 实体类进行接收。
控制台输出：当前 http 请求方式为:POST [entity.Book@1138a75c, entity.Book@22d1cbcf]
客户端（弹窗）：bookId =123; author=Rose bookId =321; author=Jack
