angular中如何使用post、get向后臺傳參-創(chuàng)新互聯(lián)

小編給大家分享一下angular中如何使用post、get向后臺傳參，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元阿克陶做網(wǎng)站,已為上家服務(wù),為阿克陶各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220

一、問題的來源

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

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

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

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

那么接下來就研究怎么解決post的傳值了。

二、問題的解決

1. 修改請求頭

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

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

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

首先使用修改post請求頭。具體代碼如下：

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

此時在后臺中（使用的是php),輸入echo $_POST[id],就會顯示。而debug其中顯示的請求頭正是我們設(shè)置的。

2.在后臺進行解決

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

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'];

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

但是此時還有另外的方法。使用file_get_contents("php://input")，這個方法中 php://input 是個可以訪問請求的原始數(shù)據(jù)的只讀流。 POST 請求的情況下，最好使用 php://input 來代替 $HTTP_RAW_POST_DATA，因為它不依賴于特定的 php.ini 指令。 此時這個方法就可以返回傳過來的參數(shù)了。代碼如下：

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

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

看完了這篇文章，相信你對“angular中如何使用post、get向后臺傳參”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標(biāo)題：angular中如何使用post、get向后臺傳參-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://muchs.cn/article40/cddjho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、定制網(wǎng)站、網(wǎng)站營銷、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)