用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 echo json_encode($_POST);?>
輸出為一個空數組。為了測試php本身是不是真的獲取不到值，我就寫了個表單測試下：
<form action="1.php" method="post"> <input type="text" name="tid"> <input type="submit" value="submit"></form>
輸出結果為：{"tid":"2"}，也就是說表單里的值是可以獲取的，但是用ajax發送的數據獲取不了！
那么表單數據和ajax發送的post數據之間有什么差異呢？于是我悄悄瞄一眼請求頭...
1.表單的請求頭部：
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Accept-Encoding: gzip, deflateAccept-Language: zh-CN,zh;q=0.8,ja;q=0.6Cache-Control: no-cacheConnection: keep-aliveContent-Length: 5Content-Type: application/x-www-form-urlencodedCookie: a0537_times=1Host: 127.0.0.1Origin: http://127.0.0.1Pragma: no-cacheReferer: http://127.0.0.1/angularTest/1.htmlUpgrade-Insecure-Requests: 1User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36
2.ajax發送的數據的請求頭部：
Accept: application/json, text/plain, */*Accept-Encoding: gzip, deflateAccept-Language: zh-CN,zh;q=0.8,ja;q=0.6Cache-Control: no-cacheConnection: keep-aliveContent-Length: 10Content-Type: application/json;charset=UTF-8Cookie: a0537_times=1Host: 127.0.0.1Origin: http://127.0.0.1Pragma: no-cacheReferer: http://127.0.0.1/angularTest/1.htmlUser-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/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 ) { var str = ''; for( var i in data ) { str += i + '=' + data[i] + '&'; } return str.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（這個不太熟，先看一眼官網上怎么說的）：
Default Transformations
The $httpProvider provider and $http service expose defaults.transformRequest and defaults.transformResponse properties. If a request does not provide its own transformations then these will be applied.You can augment or replace the default transformations by modifying these properties by adding to or replacing the array.Angular provides the following default transformations:Request transformations ($httpProvider.defaults.transformRequest and $http.defaults.transformRequest):If the data property of the request configuration object contains an object, serialize it into JSON format.Response transformations ($httpProvider.defaults.transformResponse and $http.defaults.transformResponse):If XSRF prefix is detected, strip it (see Security Considerations section below).If JSON response is detected, deserialize it using a JSON parser.
然后照抄：
app.config(['$httpProvider', function ( $httpProvider ) { $httpProvider.defaults.transformRequest = function ( data ) { var str = ''; for( var i in data ) { str += i + '=' + data[i] + '&'; } return str.substring(0,str.length-1); } }]);<code class="language-javascript">$http({ method: 'POST', url: '1.php', data: $scope.data, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (data) { console.log(data); });</code> 以上這篇快速解決angularJS中用post方法時后臺拿不到值的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
