前言
前后端的數據交互，除了通過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
|
@controllerpublic 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
|
@restcontrollerpublic 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")@responsebodypublic 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")@responsebodypublic 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
