亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

angular使用post、get向后臺傳參的問題實例

 更新時間:2017年05月27日 10:51:06   作者:泛舟青煙  
本篇文章主要介紹了angular使用post、get向后臺傳參的問題實例。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一、問題的來源

我們都知道向后臺傳參可以使用get、put,其形式就類似于name=jyy&id=001。但是在ng中我卻發(fā)現(xiàn)使用$http post進(jìn)行異步傳輸?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ū)ο螅瑫晦D(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進(jìn)行設(shè)置可以同時使用put、get、post進(jìn)行傳參。但是在我的實際操作中發(fā)現(xiàn)對common進(jìn)行修改并不能使用post進(jìn)行傳參,而只有設(shè)置了post的請求頭才可以。

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

首先使用修改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.在后臺進(jìn)行解決

由于使用的是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é)果是正確顯示了。那么直接對齊進(jìn)行操作不就可以了?好吧,那就先看看是什么類型:使用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。

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

相關(guān)文章

  • angular 表單驗證器驗證的同時限制輸入的實現(xiàn)

    angular 表單驗證器驗證的同時限制輸入的實現(xiàn)

    表單驗證是經(jīng)常用到一個東西,這篇文章主要介紹了angular 表單驗證器驗證的同時限制輸入的實現(xiàn),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-04-04
  • 深入理解Angularjs中$http.post與$.post

    深入理解Angularjs中$http.post與$.post

    本篇文章主要介紹了深入理解Angularjs中$http.post與$.post ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • Angular.Js之Scope作用域的學(xué)習(xí)教程

    Angular.Js之Scope作用域的學(xué)習(xí)教程

    這篇文章主要給大家分享了關(guān)于Angular.Js之Scope作用域的學(xué)習(xí)教程 ,文中通過多個示例代碼介紹的非常詳細(xì),相信對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。
    2017-04-04
  • Angularjs的$http異步刪除數(shù)據(jù)詳解及實例

    Angularjs的$http異步刪除數(shù)據(jù)詳解及實例

    這篇文章主要介紹了Angularjs的$http異步刪除數(shù)據(jù)詳解及實例的相關(guān)資料,這里提供實現(xiàn)思路及實現(xiàn)具體的方法,需要的朋友可以參考下
    2017-07-07
  • Angular CLI在Angular項目中如何使用scss詳解

    Angular CLI在Angular項目中如何使用scss詳解

    angular-cli自身支持Scss預(yù)處理器,Scss比css更加方便靈活,而且層次清晰,代碼整潔。下面這篇文章主要給大家介紹了關(guān)于Angular CLI在Angular項目中如何使用scss的相關(guān)資料,需要的朋友可以參考下。
    2018-04-04
  • Angular 輸入框?qū)崿F(xiàn)自定義驗證功能

    Angular 輸入框?qū)崿F(xiàn)自定義驗證功能

    AngularJS 表單和控件可以驗證輸入的數(shù)據(jù)。本文給大家介紹Angular 輸入框?qū)崿F(xiàn)自定義驗證功能,非常不錯,具有參考借鑒價值,需要的朋友參考下
    2017-02-02
  • AngularJs Scope詳解及示例代碼

    AngularJs Scope詳解及示例代碼

    本文主要介紹AngularJs Scope的知識,這里整理了詳細(xì)資料及示例代碼,有興趣的小伙伴可以參考下
    2016-09-09
  • 詳解JavaScript的AngularJS框架中的表達(dá)式與指令

    詳解JavaScript的AngularJS框架中的表達(dá)式與指令

    這篇文章主要介紹了JavaScript的AngularJS框架中的表達(dá)式與指令,文中羅列了幾個常用的指令屬性加以說明,需要的朋友可以參考下
    2016-03-03
  • 詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案

    詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案

    這篇文章主要介紹了詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • angularJs利用$scope處理升降序的方法

    angularJs利用$scope處理升降序的方法

    今天小編就為大家分享一篇angularJs利用$scope處理升降序的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10

最新評論