当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对象也可以成功绑定到参数中了!