快速解決angularJS中用post方法時(shí)后臺(tái)拿不到值的問(wèn)題

更新時(shí)間：2018年08月14日 08:38:53 作者：zsgod

今天小編就為大家分享一篇快速解決angularJS中用post方法時(shí)后臺(tái)拿不到值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

不論是這種姿勢(shì)：

$http.post( "1.php", { id: 1 }).success(function (data) {
  console.log(data);
  });

還是這種姿勢(shì)：

$http({
 method: 'POST',
 url: '1.php',
 data: { id: 1 }
 }).success(function (data) {
 console.log(data);
 });

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

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

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

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

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

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

1.表單的請(qǐng)求頭部：

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ù)的請(qǐng)求頭部：

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

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

那么怎么把Content-type給改了呢？于是我就打開(kāi)了angular的官網(wǎng)，照著改一下請(qǐ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}":""}，還是有問(wèn)題。對(duì)象并沒(méi)有自動(dòng)地序列化（jQuery用習(xí)慣了都快忘了居然還有這個(gè)問(wèn)題?。?/p>

那么解決方案有：

1.不寫(xiě)成對(duì)象的形式，直接寫(xiě)字符串：

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

2.重寫(xiě)angular中transformRequest，自己寫(xiě)一個(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.重寫(xiě)angular中的transformRequest，簡(jiǎn)單粗暴地把jquery拿過(guò)來(lái)：

 $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)上怎么說(shuō)的）：

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)拿不到值的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: