SpringMVC接收与响应json数据的⼏种⽅式
前⾔
前后端的数据交互,除了通过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.</groupId>mvc的controller
<artifactId>jackson-core</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>com.</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>com.</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请求⽅式为:"+Method());
System.out.println("bookId="+BookId()+", author="+Author());
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请求⽅式为:"+Method());
System.out.println("bookId="+BookId()+", author="+Author());
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= ate(null);
for (var [k,v] of map) {
obj[k] = v;
}
$.ajax({
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请求⽅式为:"+Method());
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")
public List<Book> acceptJsonByList(@RequestBody List<Book> book, HttpServletRequest request){
System.out.println("当前http请求⽅式为:"+Method());
System.out.println(book);
return book;
}
注意:这⾥需要Book实体类进⾏接收。
控制台输出:当前http请求⽅式为:POST [entity.Book@1138a75c, entity.Book@22d1cbcf]
客户端(弹窗):bookId =123; author=Rose bookId =321; author=Jack
总结
以上就是这篇⽂章的全部内容了,希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值,谢谢⼤家对的⽀持。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论