溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
前后端的數據交互，除了通過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
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
