SpringMVC在怎么接收和响应json数据
强大自己是解决问题的唯一方法
今天一早起床,就收到了两个笑脸,本着礼貌,回了一下,紧接着被问了两个问题,我一贯的态度是,能百度解决就尽量不要问(居然还有人敢问我问题,勇气可嘉),但看到这位朋友头像是只在悬崖边上不苟言笑的小猫猫,想必是经历了大风大浪,看透世态炎凉,依然努力向上的小伙子。有点感动,于是我决定写一篇博客,希望能帮到他吧。
前后端的数据传递方式
- form表单提交方式
- ajax向后端传递和接收json格式数据的方式(优点是实现请求数据和页面分离)。
需要哪些准备?
- 导入json相关框架的依赖(fastjson、jackson等等)(Maven要了解)。
- 正确书写spring mvc的
controller
方法,为了响应json,添加@RequestBody
注解。
**注意:**引入jQuery,提醒一下,如果不清楚,去看官方文档
jackson maven依赖:
<!-- jackson依赖 -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>合适即可</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>合适即可</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>合适即可</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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~