從jquery裡的$.ajax()到angularjs的$http
jquery中對ajax的使用做了很多封裝，使得我們使用習慣了，反而並不大清楚在請求過程中的一些細節。
在第一次使用angularjs的$http時，後臺一直接受不到前端請求的資料，於是小小研究了一下。
用我自己這邊的專案為例，後臺服務這邊接受請求的方式是通過HttpContext.Request.Params來，原來用jquery中的Ajax請求一直正常，一換到原始的$http,瞬間奔潰啦。。。。
如果使用最原始的$http,會發現谷歌中network的請求資料格式是：
而以前使用正常的訪問下資料格式為：
對比時會發現兩個問題：
1.資料在請求體中的位置不一樣、
2.資料格式不一樣
於是做的相關研究，結論如下
1.jquery中的$.ajax()預設Content-Type為“application/x-www-form-urlencoded”，這個設定會把請求的資料放到請求體中，即在Form Data中出現。
$http的話，預設的應該是“text/plain;charset=UTF-8”，這個設定會把請求的資料放到Request Payload中。
ps.Get 和Post的區別是請求的資料是否附加到url後面。
2.jquery中傳送到伺服器的資料會自動轉換成類似 &foo=bar1&foo=bar2的格式，然後伺服器端根據相應的格式來解析。而$http裡是沒有這種自動轉換的，
需要自己做這個格式轉換動作。
程式碼如下：
//啟動模組
var app = angular.module('app', [
//依賴模組
], function ($httpProvider) {
var param = function (obj) {
var query = '', name, value, fullSubName, subName, subValue, innerObj, i;
for (name in obj) {
value = obj[name];
if (value instanceof Array) {
for (i = 0; i < value.length; ++i) {
subValue = value[i];
fullSubName = name + '[' + i + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if (value instanceof Object) {
for (subName in value) {
subValue = value[subName];
fullSubName = name + '[' + subName + ']';
innerObj = {};
innerObj[fullSubName] = subValue;
query += param(innerObj) + '&';
}
}
else if (value !== undefined && value !== null)
query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
}
return query.length ? query.substr(0, query.length - 1) : query;
};
// Override $http service's default transformRequest
$httpProvider.defaults.transformRequest = [function (data) {
return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
}];
});
紅色文字即我們需要新增的格式轉換功能。
附上請求原資料格式：
伺服器端請求時如果加上上面那段轉換程式碼，會發現屬性欄位之間是&分開的。如果沒有的話，則不是的話，伺服器端沒法解析。
Goals determine what you are going to be!