快捷導(dǎo)航

AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)問(wèn)題及解決方案

更新時(shí)間：2020年08月13日 12:33:27 作者：浮云也是種寂寞

這篇文章主要介紹了AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)的問(wèn)題及解決方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近在使用AngularJs+Php開(kāi)發(fā)中遇到php后臺(tái)無(wú)法接收到來(lái)自AngularJs的數(shù)據(jù),在網(wǎng)上也有許多解決方法,卻都點(diǎn)到即止.多番摸索后記錄下解決方法:

tips:當(dāng)前使用的AngularJs版本為v1.5.0-rc.0

原因分析:

在使用jquery的時(shí)候進(jìn)行post請(qǐng)求的時(shí)候很簡(jiǎn)單.

$.ajax({
 type: 'POST',
 url:'process.php',
 data: formData,
 dataType: 'json',
 success: function(result){
 //do something
 }
 });

對(duì)這個(gè)傳輸?shù)臄?shù)據(jù)我們一般會(huì)直接使用serialize()或使用serializeArray()處理后再傳輸,但在發(fā)送post請(qǐng)求時(shí)jquery會(huì)把這個(gè)對(duì)象轉(zhuǎn)換為字符串后再發(fā)送,類(lèi)似"a=123&b=456".
而AngularJs傳輸?shù)氖且粋€(gè)Json數(shù)據(jù)而不是一個(gè)轉(zhuǎn)換后的字符串,在php端接收的時(shí)候不能直接使用$_POST方式接收.這樣是獲取不到數(shù)據(jù)的.
$POST方式只能接收Content-Type: application/x-www-form-urlencoded提交的數(shù)據(jù),也就是表單提交的數(shù)據(jù).
但可以使用file_get_contents("php://input")接收,對(duì)于沒(méi)有沒(méi)有指定Content-Type的Post數(shù)據(jù)也是可以接收到的,此時(shí)獲取到的是個(gè)字符串還需要再轉(zhuǎn)換才能變成我們想要的數(shù)據(jù)格式.這樣無(wú)疑增加了工作量.

解決方案:

1.引用JQuery,使用JQuery的$.param()方法序列化參數(shù)后傳遞

$http({
 method : 'POST',
 url: 'process.php',
 data: $.param($scope.formData), //序列化參數(shù)
 headers: { 'Content-Type': 'application/x-www-form-urlencoded' } )
})

2.使用file_get_contents("php://input")獲取再處理

$input = file_get_contents("php://input",true);
echo $input;

3.修改Angular的$httpProvider的默認(rèn)處理(參考:http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/)

// Your app's root module...
angular.module('MyModule', [], function($httpProvider) {
 // Use x-www-form-urlencoded Content-Type
 $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
 
 /**
 * The workhorse; converts an object to x-www-form-urlencoded serialization.
 * @param {Object} obj
 * @return {String}
 */
 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;
 }];
});

$http({
 method:"POST",
 url:"/api/login.php",
 data:$scope.Account
});

補(bǔ):

php獲取時(shí)也可通過(guò)$GLOBALS['HTTP_RAW_POST_DATA']獲取POST提交的原始數(shù)據(jù).

但$GLOBALS['HTTP_RAW_POST_DATA']中是否保存POST過(guò)來(lái)的數(shù)據(jù)取決于centent-Type的設(shè)置，即POST數(shù)據(jù)時(shí) 必須顯式示指明Content-Type: application/x-www-form-urlencoded，POST的數(shù)據(jù)才會(huì)存放到 $GLOBALS['HTTP_RAW_POST_DATA']中.

總結(jié)

到此這篇關(guān)于A(yíng)ngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)解決方案的文章就介紹到這了,更多相關(guān)AngularJs的$http發(fā)送POST請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: