从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;
}];

});

红色文字即我们需要添加的格式转换功能。

附上请求原数据格式：

 

服务器端请求时如果加上上面那段转换代码，会发现属性字段之间是&分开的。如果没有的话，则不是的话，服务器端没法解析。