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

weixin_34037977發表於2017-10-26
ORM

http://blog.csdn.net/yiifaa/article/details/73468001

***************************************************

後端處理前端提交的資料時，既可以使用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雖然都能提交資料，但它們的應用場景差異較大，需要準確理解它們的差異才是應用得當的前提。

 

相關文章