一、問題的來(lái)源

我們都知道向后臺(tái)傳參可以使用get、put，其形式就類似于name=jyy&id=001。但是在ng中我卻發(fā)現(xiàn)使用$http post進(jìn)行異步傳輸?shù)倪^程中后臺(tái)是接收不到數(shù)據(jù)的。其實(shí)這個(gè)問題是因?yàn)檎?qǐng)求頭的緣故。在ng中默認(rèn)的請(qǐng)求頭是：“Content-Type":"application/json"，也就是說(shuō)傳遞參數(shù)是使用的就是json格式。但是后臺(tái)默認(rèn)的卻是Content-Type': 'application/x-www-form-urlencoded'。因此在這樣的情況下后臺(tái)接收到的數(shù)據(jù)就會(huì)是空的。

那么為什么使用get形式就可以傳參呢？在書中我發(fā)現(xiàn)這樣的一句話：”這個(gè)鍵的值是一個(gè)字符串map或?qū)ο?，?huì)被轉(zhuǎn)換成查詢字符串追加在URL后面。如果值不是字符串，會(huì)被JSON序列化”，可以理解為在get中參數(shù)的傳遞是直接追加在url后面的，那么此時(shí)參數(shù)形式{"id":"1","name":"jyy"}會(huì)被轉(zhuǎn)化成id=1&name=jyy追加在url后面。那么在后臺(tái)中就可以直接獲取到了。例如：

var app = angular.module('app',[]);
    app.controller('ctrl',function($scope,$q,$http){
      var defer = $q.defer();
      var promise = defer.promise;
      $http({
        method: "get",
        params:{id:1,name:jyy},
        url:"1.php"
      }).success(function(data){
        defer.resolve(data);
      });
      promise.then(function(data){
        $scope.data = data;
      })
    })

在后臺(tái)（PHP）輸入echo $_GET[id]就可以正常顯示了。

那么接下來(lái)就研究怎么解決post的傳值了。

二、問題的解決

1. 修改請(qǐng)求頭

第一種方法就是在ng中修改請(qǐng)求頭將json格式改成x-www-form-urlencoded。修改方法點(diǎn)擊即可查看。

值得注意的是，在使用第二種方法時(shí)，可以修改put，get，post，common的傳參格式。因此修改哪種方式，就只能使用這種方式才能在后臺(tái)得到參數(shù)。這篇博文寫到使用common進(jìn)行設(shè)置可以同時(shí)使用put、get、post進(jìn)行傳參。但是在我的實(shí)際操作中發(fā)現(xiàn)對(duì)common進(jìn)行修改并不能使用post進(jìn)行傳參，而只有設(shè)置了post的請(qǐng)求頭才可以。

另外由于在ng中的參數(shù)都是使用json格式表達(dá)，因此需要引入jquery，使用其$.param("參數(shù)列表的json格式")進(jìn)行序列化表示。

首先使用修改post請(qǐng)求頭。具體代碼如下：

var app = angular.module('app');
　　
    app.config(function($httpProvider){
      $httpProvider.defaults.headers.post = { 'Content-Type': 'application/x-www-form-urlencoded' }
    })
    app.controller('ctrl',function($scope,$resource,$q,$http){
      var defer = $q.defer();
      var promise = defer.promise;
      $http({
        method: "post",
        data:$.param({"id":"1","name":"jyy"}),
        url:"1.php"
      }).success(function(data){
        defer.resolve(data);
      });
      promise.then(function(data){
        $scope.data = data;
      })
    })

此時(shí)在后臺(tái)中（使用的是php),輸入echo $_POST[id],就會(huì)顯示。而debug其中顯示的請(qǐng)求頭正是我們?cè)O(shè)置的。

2.在后臺(tái)進(jìn)行解決

由于使用的是php，所以暫時(shí)用php的方法解決。在這個(gè)方法中，我們不修改請(qǐng)求頭。因?yàn)間et傳值是正常的，那么，只要能夠得到post的值就好。既然ng向后臺(tái)傳值了，即便是因?yàn)檎?qǐng)求頭不同，但是總會(huì)傳過來(lái)什么的吧，既然能夠傳過來(lái)，就先獲取它。這個(gè)時(shí)候使用$GLOBALS['HTTP_RAW_POST_DATA']將這個(gè)傳過來(lái)的東西顯示出來(lái)。那么這個(gè)$GLOBALS['HTTP_RAW_POST_DATA']是什么呢？在網(wǎng)上查詢得知$HTTP_RAW_POST_DATA 變量包含有原始的 POST 數(shù)據(jù)。此變量?jī)H在碰到未識(shí)別 MIME 類型的數(shù)據(jù)時(shí)產(chǎn)生,PHP不能識(shí)別的Content-Type類型的時(shí)候，會(huì)將http請(qǐng)求包中相應(yīng)的數(shù)據(jù)填入變量$HTTP_RAW_POST_DATA。就是說(shuō)現(xiàn)在這個(gè)請(qǐng)求頭雖然是有沖突的，但是卻能夠顯示出來(lái)。如下：

var app = angular.module('app',[]);
    app.controller('ctrl',function($scope,$q,$http){
      var defer = $q.defer();
      var promise = defer.promise;
      $http({
        method: "post",
        data:{'id':'1','name':'jyy'},
        url:"1.php"
      }).success(function(data){
        defer.resolve(data);
      });
      promise.then(function(data){
        $scope.data = data;
      })
    })

php代碼：

echo $GLOBALS['HTTP_RAW_POST_DATA'];

此時(shí)顯示出來(lái)的東西是：{"id":"1","name":"jyy"}。發(fā)現(xiàn)這個(gè)結(jié)果是正確顯示了。那么直接對(duì)齊進(jìn)行操作不就可以了？好吧，那就先看看是什么類型：使用gettype()得到的是string，就是說(shuō)他是個(gè)json字符串。那就使用json_decode()轉(zhuǎn)換，發(fā)現(xiàn)會(huì)報(bào)錯(cuò)。好吧，放棄使用這個(gè)方法。

但是此時(shí)還有另外的方法。使用file_get_contents("php://input")，這個(gè)方法中 php://input 是個(gè)可以訪問請(qǐng)求的原始數(shù)據(jù)的只讀流。 POST 請(qǐng)求的情況下，最好使用 php://input 來(lái)代替 $HTTP_RAW_POST_DATA，因?yàn)樗灰蕾囉谔囟ǖ?php.ini 指令。 此時(shí)這個(gè)方法就可以返回傳過來(lái)的參數(shù)了。代碼如下：

$a = json_decode(file_get_contents("php://input"));
  echo $a->id;

結(jié)果輸出正確的id。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家

最新評(píng)論