AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)問(wèn)題及解決方案
最近在使用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)于AngularJs的$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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
AngularJS service之select下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了AngularJS service之select下拉菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07angular4 如何在全局設(shè)置路由跳轉(zhuǎn)動(dòng)畫(huà)的方法
本篇文章主要介紹了angular4 如何在全局設(shè)置路由跳轉(zhuǎn)動(dòng)畫(huà)的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08Angular JS 生成動(dòng)態(tài)二維碼的方法
這篇文章主要介紹了Angular JS 生成動(dòng)態(tài)二維碼的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02Angular?Ngrx?Store應(yīng)用程序狀態(tài)典型示例詳解
這篇文章主要為大家介紹了Angular?Ngrx?Store應(yīng)用程序狀態(tài)典型示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07AngularJS驗(yàn)證信息框架的封裝插件用法【w5cValidator擴(kuò)展插件】
這篇文章主要介紹了AngularJS驗(yàn)證信息框架的封裝插件用法,分析了AngularJS表單驗(yàn)證規(guī)則并實(shí)例說(shuō)明了w5cValidator擴(kuò)展插件的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11AngularJS學(xué)習(xí)筆記之表單驗(yàn)證功能實(shí)例詳解
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記之表單驗(yàn)證功能,結(jié)合實(shí)例形式分析了AngularJS針對(duì)表單的校驗(yàn)、監(jiān)控等相關(guān)操作技巧,需要的朋友可以參考下2017-07-07關(guān)于angular瀏覽器兼容性問(wèn)題的解決方案
這篇文章主要給大家介紹了關(guān)于angular瀏覽器兼容性問(wèn)題的解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07