当SpringMVC遇上前端传来的json

这个小问题还是困扰了我:SpringMVC无法正确接收前端传来的参数。而网上的博文解决方法参差不齐或者是有些点忽略了没讲，于是我整理了一下各种形式的解决方法。

内容

1.这个测试内容很简单，就是前端直接传来form-data形式，json形式的字符串，看看后端接受的结果如何。 2.要善于F12调试工具(谷歌浏览器)，查看究竟前端传出去的数据形式是什么。 3.由于本人对前端一无所知，于是只能用上jqery来简单模拟了。

前端传来Form-data形式的数据（没有传送数组）

---

1.前端代码:只传一个username

$(".submit").click(function(){ var send = { username : "test"}; $.ajax({ url:'/testForm', type:'POST', async:true, data: send, dataType:'json', success:function(data){ console.log("get response : " + data); } }); });

2.后端代码:(@RequestParam 指定需要username参数)

@RequestMapping(value = "/testForm", method = RequestMethod.POST, produces = "application/json;charset=UTF-8") @ResponseBody public String testForm(@RequestParam String username){ System.out.println(username ); return "success"; }

3.结果:成功 (1)前端发送:

(2)后端成功输出test并且成功返回success字符

前端传来Form-data形式的数据（传送数组）

---

1.前端代码:username和一个数组

$(".submit").click(function(){ var array = [1, 2, 3]; var send = { username : "test", data : array}; $.ajax({ url:'/testForm', type:'POST', async:true, data: send, dataType:'json', success:function(data){ console.log("get response : " + data); } }); });

2.后端代码:(即使把data换成int[]结果也是一样)

@RequestMapping(value = "/testForm", method = RequestMethod.POST, produces = "application/json;charset=UTF-8") @ResponseBody public String testForm(@RequestParam String username, @RequestParam List<Integer> data){ System.out.println(username + " " + data.toString()); return "success"; }

3结果:失败 (1)报错:400 Bad Request (2)那么前端发送的是什么呢? 可以看到，这是把data拆分了发送，这肯定是不想要的。我们使用传递json形式的字符串来传递

后端接受前端传来的json形式的字符串(键值对形式)

---

1.要实现这个功能，后端必须提前做一些准备

步骤说明引入jackson依赖为了支持能从前端接受json格式的字符串并自动让Spring将数据绑定到我们的参数中参数使用@RequestBody标明参数不可以再使用@RequestMapping

至于参数，可以使用Map来接收:

@RequestMapping(value = "/testMap", method = RequestMethod.POST, produces = "application/json;charset=UTF-8") @ResponseBody public String testMap(@RequestBody Map<String , Object> data){ if (data != null && data.size() != 0){ System.out.println(data.get("username")); System.out.println(((List)data.get("data")).toString()); } return "success"; }

也可以自定义dto来接收,注意属性名字和传来的键名字应该一样:

public class TestDto { private int[] data; private String username; public int[] getData() { return data; } public void setData(int[] data) { this.data = data; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } @Override public String toString() { return "TestDto{" + "data=" + Arrays.toString(data) + ", username='" + username + '\'' + '}'; } } @RequestMapping(value = "/testDto", method = RequestMethod.POST, produces = "application/json;charset=UTF-8") @ResponseBody public String testDto(@RequestBody TestDto testDto){ System.out.println(testDto); return "success"; }

2.前端也要做出改变

步骤说明ajax中加上contentType : “application/json”表明发送json使用JSON.stringify()将数据格式化为json的格式 $(".submit").click(function(){ var array = [1, 2, 3]; var array = [1, 2, 3]; var send = { username : "test", data : array}; $.ajax({ url:'/testForm', type:'POST', async:false, data: JSON.stringify(send), contentType : "application/json", dataType:'json', success:function(data){ console.log("get response : " + data); } }); });

3.测试 (1)将上述url分别改为·/estMap，/testDto,结果都是成功

前端传来json格式的数组

1.上面都是以键值对的形式来传，那么如果单纯传一个数组呢，那就更简单了。 2.普通数组 (1)前端

$(".submit").click(function(){ var array = [1, 2, 3]; $.ajax({ url:'/testIntArray', type:'POST', async:false, data: JSON.stringify(array), contentType : "application/json", dataType:'json', success:function(data){ console.log("get response : " + data); } }); });

(2)后端

@RequestMapping(value = "/testIntArray", method = RequestMethod.POST, produces = "application/json;charset=UTF-8") @ResponseBody public String testIntArray(@RequestBody int[] array){ System.out.println(Arrays.toString(array)); return "success"; }

(3)结果肯定是成功的!

3.对象数组(考虑一个User对象，具有username和password两个数据域) (1)前端:

$(".submit").click(function(){ var array = [{username : "test1", password : "pwd1"}, {username : "test2", password : "pwd2"}]; $.ajax({ url:'/testUserArray', type:'POST', async:false, data: JSON.stringify(array), contentType : "application/json", dataType:'json', success:function(data){ console.log("get response : " + data); } }); });

(2)后端:

@RequestMapping(value = "/testUserArray", method = RequestMethod.POST, produces = "application/json;charset=UTF-8") @ResponseBody public String testUserArray(@RequestBody User[] array){ System.out.println(Arrays.toString(array)); return "success"; }

(3)结果当然是成功啦!user对象也可以成功绑定到参数中了!