angularJS中用post方法時(shí)后臺(tái)拿不到值怎么辦

這篇文章主要為大家展示了“angularJS中用post方法時(shí)后臺(tái)拿不到值怎么辦”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“angularJS中用post方法時(shí)后臺(tái)拿不到值怎么辦”這篇文章吧。

用angularJS中的$http服務(wù)碰到了一個(gè)問題：運(yùn)用$http.post方法向后臺(tái)傳遞數(shù)據(jù)時(shí)，后臺(tái)的php頁面獲取不到data參數(shù)傳過來的值。

不論是這種姿勢：

$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);
 });

后臺(tái)php中的$_POST或$_REQUEST都無法獲取到data中的值：

<?php
 echo json_encode($_POST);
?>

輸出為一個(gè)空數(shù)組。為了測試php本身是不是真的獲取不到值，我就寫了個(gè)表單測試下：

<form action="1.php" method="post">
 <input type="text" name="tid">
 <input type="submit" value="submit">
</form>

輸出結(jié)果為：{"tid":"2"}，也就是說表單里的值是可以獲取的，但是用ajax發(fā)送的數(shù)據(jù)獲取不了！

那么表單數(shù)據(jù)和ajax發(fā)送的post數(shù)據(jù)之間有什么差異呢？于是我悄悄瞄一眼請求頭...

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 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

2.ajax發(fā)送的數(shù)據(jù)的請求頭部：

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 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36

問題一下子就出來了！表單發(fā)送的文本類型是表單類型，而angular的ajax默認(rèn)發(fā)送的則是json數(shù)據(jù)。

那么怎么把Content-type給改了呢？于是我就打開了angular的官網(wǎng)，照著改一下請求頭：

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

于是輸出結(jié)果為：{"{\"test\":1}":""}，還是有問題。對象并沒有自動(dòng)地序列化（jQuery用習(xí)慣了都快忘了居然還有這個(gè)問題！）

那么解決方案有：

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，自己寫一個(gè)轉(zhuǎn)換方法：

 $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.修改默認(rèn)的transformations（這個(gè)不太熟，先看一眼官網(wǎng)上怎么說的）：

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方法時(shí)后臺(tái)拿不到值怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！