快速解决angularJS中用post方法时后台拿不到值的问题

2023-09-09 02:19:04 78

用angularJS中的$http服务碰到了一个问题：运用$http.post方法向后台传递数据时，后台的php页面获取不到data参数传过来的值。

不论是这种姿势：

$http.post("1.php",{id:1}).success(function(data){
console.log(data);
});

还是这种姿势：

$http({
method:'POST',
url:'1.php',
data:{id:1}
}).success(function(data){
console.log(data);
});

后台php中的$_POST或$_REQUEST都无法获取到data中的值：

输出为一个空数组。为了测试php本身是不是真的获取不到值，我就写了个表单测试下：

输出结果为：{"tid":"2"}，也就是说表单里的值是可以获取的，但是用ajax发送的数据获取不了！

那么表单数据和ajax发送的post数据之间有什么差异呢？于是我悄悄瞄一眼请求头...

1.表单的请求头部：

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate
Accept-Language:zh-CN,zh;q=0.8,ja;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Content-Length:5
Content-Type:application/x-www-form-urlencoded
Cookie:a0537_times=1
Host:127.0.0.1
Origin:http://127.0.0.1
Pragma:no-cache
Referer:http://127.0.0.1/angularTest/1.html
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0(WindowsNT6.1;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/50.0.2661.102Safari/537.36

2.ajax发送的数据的请求头部：

Accept:application/json,text/plain,*/*
Accept-Encoding:gzip,deflate
Accept-Language:zh-CN,zh;q=0.8,ja;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Content-Length:10
Content-Type:application/json;charset=UTF-8
Cookie:a0537_times=1
Host:127.0.0.1
Origin:http://127.0.0.1
Pragma:no-cache
Referer:http://127.0.0.1/angularTest/1.html
User-Agent:Mozilla/5.0(WindowsNT6.1;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/50.0.2661.102Safari/537.36

问题一下子就出来了！表单发送的文本类型是表单类型，而angular的ajax默认发送的则是json数据。

那么怎么把Content-type给改了呢？于是我就打开了angular的官网，照着改一下请求头：

$http({
method:'POST',
url:'1.php',
data:{id:1}
headers:{
'Content-Type':'application/x-www-form-urlencoded'
}
}).success(function(data){
console.log(data);
});

于是输出结果为：{"{\"test\":1}":""}，还是有问题。对象并没有自动地序列化（jQuery用习惯了都快忘了居然还有这个问题！）

那么解决方案有：

1.不写成对象的形式，直接写字符串：

$http({
method:'POST',
url:'1.php',
data:'test=1',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
}
}).success(function(data){
console.log(data);
});

2.重写angular中transformRequest，自己写一个转换方法：

$http({
method:'POST',
url:'1.php',
data:$scope.data,
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
transformRequest:function(data){
varstr='';
for(variindata){
str+=i+'='+data[i]+'&';
}
returnstr.substring(0,str.length-1);
}
}).success(function(data){
console.log(data);
});

3.重写angular中的transformRequest，简单粗暴地把jquery拿过来：

$http({
method:'POST',
url:'1.php',
data:$scope.data,
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
transformRequest:function(data){
return$.param(data);
}
}).success(function(data){
console.log(data);
});

4.修改默认的transformations（这个不太熟，先看一眼官网上怎么说的）：

DefaultTransformations

The$httpProviderproviderand$httpserviceexposedefaults.transformRequestanddefaults.transformResponseproperties.Ifarequestdoesnotprovideitsowntransformationsthenthesewillbeapplied.

Youcanaugmentorreplacethedefaulttransformationsbymodifyingthesepropertiesbyaddingtoorreplacingthearray.

Angularprovidesthefollowingdefaulttransformations:

Requesttransformations($httpProvider.defaults.transformRequestand$http.defaults.transformRequest):

Ifthedatapropertyoftherequestconfigurationobjectcontainsanobject,serializeitintoJSONformat.
Responsetransformations($httpProvider.defaults.transformResponseand$http.defaults.transformResponse):

IfXSRFprefixisdetected,stripit(seeSecurityConsiderationssectionbelow).
IfJSONresponseisdetected,deserializeitusingaJSONparser.

然后照抄：

app.config(['$httpProvider',function($httpProvider){
$httpProvider.defaults.transformRequest=function(data){
varstr='';
for(variindata){
str+=i+'='+data[i]+'&';
}
returnstr.substring(0,str.length-1);
}
}]);

$http({
method:'POST',
url:'1.php',
data:$scope.data,
headers:{
'Content-Type':'application/x-www-form-urlencoded'
}
}).success(function(data){
console.log(data);
});

以上这篇快速解决angularJS中用post方法时后台拿不到值的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

快速解决angularJS中用post方法时后台拿不到值的问题

热门推荐

随机推荐