SpringMVC接收和响应json数据

前后端的数据交互，除了通过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>

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（上面的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