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>

1、以實體類接收

背景：當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，配置的視圖解析器也不會起做用。

2、以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

3、以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