$.ajax使用總結(一)：Form提交與Payload提交

$.ajax使用總結(一)：Form提交與Payload提交

後端處理前端提交的數據時，既能夠使用Form解析，也能夠使用JSON解析Payload字符串。

Form解析能夠直接從Request對象中獲取請求參數，這樣對象轉換與處理相對容易，但在大片JSON數據須要提交時，可能會出現大量的數據拆分與處理工做，另外針對集合類型的處理，也是其比較孱弱的地方。

而Payload的優點是一次能夠提交大量JSON字符串，但沒法從Request從獲取參數，也會受限於JSON解析的深度（尤爲是有多層對象級聯的狀況，最底層的對象幾乎沒法轉換爲具體類型）。

以Chrome瀏覽器爲例，它們提交時的網絡參數截圖以下所示： 

如下是Payload的提交方式： 

具體到是實現上，$.ajax默認的實現方式就是Form提交，核心在於contentType的設置上，以下：

var data =  {
    name : 'yiifaa'
};
//  提交數據
$.ajax('app/', {
    method:'POST',
    //  將數據編碼爲表單模式
    contentType:'application/x-www-form-urlencoded; charset=UTF-8',
    //  數據必須爲JS對象，不但是字符串
    data : data,
    success : function(datas) {
        console.log(datas)
    }
})

而Payload提交方式的實現以下：

$.ajax('app/', {
    //  據我測試了屢次，payload只能用於POST方式
    method:'POST',
    //  數據類型必須爲application/x-www-form-urlencoded以外的類型
    contentType:'application/json;charset=utf-8', charset=UTF-8',
    //  數據必須轉換爲字符串
    data : JSON.stringify(data),
    success : function(datas) {
        console.log(datas)
    }
})

結論

Form提交與Payload雖然都能提交數據，但它們的應用場景差別較大，須要準確理解它們的差別纔是應用得當的前提。