这个小问题还是困扰了我:SpringMVC无法正确接收前端传来的参数。而网上的博文解决方法参差不齐或者是有些点忽略了没讲,于是我整理了一下各种形式的解决方法。
1.这个测试内容很简单,就是前端直接传来form-data形式,json形式的字符串,看看后端接受的结果如何。
2.要善于F12调试工具(谷歌浏览器),查看究竟前端传出去的数据形式是什么。
3.由于本人对前端一无所知,于是只能用上jqery来简单模拟了。
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";
}
(2)后端成功输出test并且成功返回success字符
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形式的字符串来传递
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
,结果都是成功
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对象也可以成功绑定到参数中了!