JSON數據交互

在web開發中，前端常經過ajax提交json數據與後臺交互
在使用JSON進行數據交互時，須要先導入jackson-databind包(maven會自動導入它的基礎包jackson-core核心包和jackson-annotation註解包，而且註解包須要在SpringMVC中添加<mvc:annotation-driven />)
推薦在實際項目開發中99%(剩下的1%建議作好刪庫跑路準備)使用JSON對象傳數據，由於對數據複雜狀況下JSON串使用並不方便
JSON串不能取屬性，強行取屬性只會獲得undefined

JSON串傳輸

前端

// 例用ajax提交表單數據
    $('#myAjax').on('click',function(){
        $.ajax({
            type:"POST",
            url:"testAjax",
            data:{ 
                shopName:"myShop",
                shopDesc:"myDesc"
            },
            contentType:"application/x-www-form-urlencoded",// 默認類型，能夠不寫
            dataType:"text",
            success:function(result){
                alert(result);
            },
            error:function(d,m){
                alert(m);
            }
        });
    });

後端

@RequestMapping(value = "/testAjax", method = RequestMethod.POST)
    @ResponseBody
    public Object my(Shop shop) {
        System.out.println(shop);
        return shop;
    }

• application/x-www-form-urlencoded表示以key1=val1&key2=val2形式(即標準URL模式)傳輸數據，JSON對象會在網絡傳輸中自動轉換成這種格式(這裏data:必須是JSON對象不能是JSON串)，傳輸到後臺的數據會自動適配成相應實體類(要求屬性一一對應)，x-www-form-urlencoded也是contentType的默認類型
• @ResponseBody表示返回JSON對象
• dataType:text表示以JSON.stringify(Object)形式解析返回的JSON對象爲JSON串(JSON字符串)

JSON對象轉輸

前端

$('#myAjax').on('click',function(){
        $.ajax({
            type:"POST",
            url:"testAjax",
            data:JSON.stringify({ shopName:"myShop",shopDesc:"myDesc"}),
            contentType:"application/json",
            dataType:"json",// dataType默認類型爲json
            success:function(result){
                alert(JSON.stringify(result));
            },
            error:function(d,m){
                alert(m);
            }
        });
    });

後端

@RequestMapping(value = "/testAjax", method = RequestMethod.POST,consumes = "application/json")
    @ResponseBody
    public Shop my(@RequestBody Shop shop) {
        System.out.println(shop);
        return shop;
    }

需設置

...
data:JSON.stringify(jsonData),
contentType:"application/json",
...

後端的參數須要註解@RequestBody以綁定實體類
consumes = "application/json"指定以JSON對象的方式解析網絡傳輸過程當中的JSON串，功能等同於contentType:"application/json"
由於已經指定了dataType:"json"，因此需JSON.stringify()解析返回JSON對象，或者繼續指定後端返回前臺數據類型dataType:"text"，否則直接輸出會獲得[Object object]結果
(對於JSON對象，能夠用JSON.data訪問相應數據)

JSON對象數組傳輸

前端

$('#myAjax').on('click',function(){
        var shop1 = { shopName:"myShop",shopDesc:"myDesc"}; 
        var shop2 = { shopName:"myShop2",shopDesc:"myDesc2"}; 
        $.ajax({
            type:"POST",
            url:"testAjax",
            data:JSON.stringify([shop1,shop2]),
            contentType:"application/json",
            dataType:"json",
            success:function(result){
                alert(JSON.stringify(result);// 如果用typeof()可知這裏是Object
            },
            error:function(d,m){
                alert(m);
            }
        });
    });

後端

@RequestMapping(value = "/testAjax", method = RequestMethod.POST,consumes = "application/json")
    @ResponseBody
    public Object my(@RequestBody Shop[] shop) {
        System.out.println(Arrays.toString(shop));
        return shop;
    }

基本沒什麼特別的注意使用JSON.stringify([shop1,shop2])將JSON對象數組轉爲JSON串，在以contentType:"application/json"以JSON對象格式傳輸便可(即標準的{key:value,key2:value2}格式，如果x-www-urlencoded則是key=value&key2=value2格式傳輸)

預備知識

contentType類型
https://www.cnblogs.com/shiha...
dataType類型

類型	做用
json	jquery以JSON.parse()形式解析JSON串(網絡傳輸)爲js對象
text	顯示後臺返回的JSON串
html	顯示後臺返回的JSON串

在http中傳輸數據時，需遵循TCP/IP協議，規範以下：

<method><request-url><version>
<headers>
<entity-body></entity-body>
</headers>
</version></request-url></method>