一型将、傳遞參數(shù)過(guò)程中POST會(huì)出問(wèn)題够挂,問(wèn)題來(lái)源:
我們都知道向后臺(tái)傳參可以使用get钞速、post贷掖,其形式類(lèi)似于name=iyy&id=001 。但是在angular中卻發(fā)現(xiàn)使用$http post 進(jìn)行異步傳輸?shù)倪^(guò)程中后臺(tái)是接收不到數(shù)據(jù)的渴语,其實(shí)這個(gè)問(wèn)題就是因?yàn)檎?qǐng)求頭的緣故苹威。在angular中默認(rèn)的請(qǐng)求頭是“Content-Type":"application/json",也就是說(shuō)傳遞參數(shù)是使用json格式遵班。但后臺(tái)默認(rèn)的卻是Content-Type': 'application/x-www-form-urlencoded'屠升。因此在這樣的情況下后臺(tái)接收到的數(shù)據(jù)就會(huì)是空的潮改。
那么為什么使用get形式就可以傳參呢狭郑?因?yàn)間et這個(gè)鍵的值是一個(gè)字符串map或?qū)ο螅瑫?huì)被轉(zhuǎn)換成查詢(xún)字符串追加在URL后面汇在。如果不是字符串翰萨,會(huì)被json序列化,可以理解為在get中參數(shù)的傳遞是直接追加在utl后面的糕殉,那么此時(shí)參數(shù)形式{“id”:"1","name":"yy"}會(huì)被轉(zhuǎn)化成id=1&name=yy追加在url后面亩鬼,后臺(tái)就直接獲取到了。
Jquery阿蝶、原生Ajax:
頭: Content-Type: application/x-www-form-urlencoded 傳輸數(shù)據(jù) 都認(rèn)(經(jīng)典所有服務(wù)器都認(rèn))Angular Js:
application/json 新潮--部分服務(wù)器默認(rèn)不支持
解決方法:
配置angularJs 庫(kù)
配置AngularJs的POST方式
a. 修改請(qǐng)求頭:
$http({
url,
method,
data,
headers:{ 'Content-Type':'application/x-www-form-urlencoded ' }
})
b: 修改傳遞內(nèi)容:
transformRequest 傳進(jìn)去一個(gè)obj雳锋,返回一個(gè)編碼編號(hào)
$http({
transformRequest(obj){
return "要傳輸?shù)淖址?
//obj=>{a:"12", b:"5"}
//return "a=12&b=5"
let att= [];
for(let name in obj){
arr.push(`$(name)=$(obj[name])`);
}
return arr.join('&');
}
})
如把{a: 12, b:5 } =>"a=12&b=5"
c: 完整寫(xiě)法(一個(gè)完整寫(xiě)法、直接在module配置一次即可):
var app = angular.module('app',[]);
//方法羡洁,修改ng的請(qǐng)求頭
app.config(function($httpProvider){
$httpProvider.defaults.transformRequest=function(obj){
let arr =[];
for(let name in obj){
arr.push(`${name}=${obj[name]}`);
}
return arr.join('&');
};
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
});
app.controller('ctrl',function($scope,$resource,$q,$http){
var defer = $q.defer();
var promise = defer.promise;
$http({
method: "post",
data:$.param({"id":"1","name":"jyy"}),
url:"1.php"
}).success(function(data){
defer.resolve(data);
});
promise.then(function(data){
$scope.data = data;
})
})