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

});

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

附上请求原数据格式:

 

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

原文地址:https://www.cnblogs.com/xuezhi/p/4829431.html