SpringMVC接收与响应json数据的几种方式

时间:2022-11-04 13:14:07

前言

前后端的数据交互,除了通过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依赖:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 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格式传递给后台,后台用对应的实体类进行接收。

客户端:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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:

?
1
2
3
4
5
6
7
8
9
10
@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可以用下面的替换):

?
1
2
3
4
5
6
7
8
9
@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。

客户端:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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:

?
1
2
3
4
5
6
7
@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数组形式传递)

客户端:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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:

?
1
2
3
4
5
6
7
@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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对服务器之家的支持。

原文链接:https://segmentfault.com/a/1190000018455694