Jquery 以及AngularJS 中 Get/Post 傳參筆記

傳參並非很難的事，但有時牽扯到例如要傳一個對象或者form到後端的時候就會有些麻煩，在這裏總結一些使用方法。

首先先介紹發送請求時咱們常常會混淆的幾個屬性：
dataType: 期待服務器返回的數據格式
mimeType: 告訴說如何處理服務器返回的數據格式，這樣browser就會進行相應的處理, 例如，設定類型爲"Text/html"，那麼client端就知道說，這是一個HTML的文檔，我直接呈現出來就能夠了；若是說是「Application/pdf」，那麼client端就會知道說須要啓動PDF閱讀器插件去呈現內容。
contentType： 是指你所要發送的數據類型，例如「application/json;charset=utf-8」就是很常見的類型， 而「application/x-www-form-urlencoded; charset=UTF-8」是默認類型。

另外，比較一下Request Payload和Form的方式有何區別：
Request Payload須要設定Content-Type:application/json
在chrome developer tool裏你會看到他傳遞的是一個Object/json，注意到裏面還包含了數組，假如你是經過ajax提交的請求，瀏覽器只是顯示出你經過Payload body提交的內容，瀏覽器並不知道資料是從哪裏來的

Form形式的須要設定Content-Type: application/x-www-form-urlencoded 或者 Content-Type: multipart/form-data，經過developer tool看到的是這樣的，這種狀況下form-data就是Request payload，瀏覽器知道什麼鍵對應什麼值，因此他是以xx=xx的形式展示的，要注意的是，數組被轉成了字串。

所以，當你須要傳的資料僅僅是鍵值對，用Form的形式足以，若是須要傳遞的是複雜結構的（例若有嵌套的數組，對象），用RequestPayload比較合適。

接下來讓咱們比較一下各類傳參狀況~

第一種狀況，傳普通字串
JQuery:

let params = {
    a: 1,
    b: 2
}
// 第一種方法:
$.ajax({
        "dataType": 'json',
        "type": "GET",
        "url": "your_request?" + $.param(params)
})

//第二種方法:
$.ajax({
        "type": "GET",
        "url": "your_request",
        "data": params
})

AngularJS:

var conf = {
    method: 'GET',
    url: 'your_request',
    params: {
        a: 1,
        b: 2
    }
};

$http(conf).then(function(response){
    console.log(response.data);
}, function(){
    console.log("error");
}).finally(function(){
    console.log("finally");
});

第二種狀況：Post form data
JQuery:

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": params
})

AngularJS:
注意data須要被轉換成URL-encoded字串
ContentType須要設定爲'application/x-www-form-urlencoded'指定傳送的數據格式爲Form

var conf = {
    method: 'POST',
    url: 'your_request',
    data: $.param({
        c: 3,
        d: 4
    }),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
};

第三種狀況：使用RequestPayload進行Post參數
JQuery:
設定contentType爲「application/json」,而且將params序列化

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": JSON.stringify(params),
    "contentType": "application/json"
})

AngularJS:

var conf = {
    method: 'POST',
    url: 'your_request',
    data: {
        c: 3,
        d: 4
    }
};

有時，當服務器返回response是null，在火狐裏會出現xml解析錯誤，是由於火狐默認使用xml解析服務器返回值，而遇到null返回值時，發生瞭解析錯誤。
在JQuery中能夠經過設定mimeType來解決

$.ajax({
        "dataType": 'json',
        "type": "GET",
        "url": "your_request",
        "mimeType": "json"
})

在AngularJS中就比較難設定mimeType，參見：https://github.com/angular/an...

錯誤之處或者更多方案歡迎提出，謝謝！