ANGULAR $HTTP請求【轉】

標籤：lob   來源   function   url   data   資料   jquery   cat   注意   

angular使用post、get向後台傳參的問題

一、問題的來源

　　我們都知道向後台傳參可以使用get、put，其形式就類似於name=jyy&id=001。但是在ng中我卻發現使用$http post進行非同步傳輸的過程中後台是接收不到資料的。其實這個問題是因為要求標頭的緣故。在ng中預設的要求標頭是：“Content-Type":"application/json"，也就是說傳遞參數是使用的就是json格式。但是後台預設的卻是Content-Type‘: ‘application/x-www-form-urlencoded‘。因此在這樣的情況下後台接收到的資料就會是空的。

　　那麼為什麼使用get形式就可以傳參呢？在書中我發現這樣的一句話：”這個鍵的值是一個字串map或對象，會被轉換成查詢字串追加在URL後面。如果值不是字串，會被JSON序列化”，可以理解為在get中參數的傳遞是直接追加在url後面的，那麼此時參數形式{"id":"1","name":"jyy"}會被轉化成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的傳參格式。因此修改哪種方式，就只能使用這種方式才能在後台得到參數。這篇博文寫到使用common進行設定可以同時使用put、get、post進行傳參。但是在我的實際操作中發現對common進行修改並不能使用post進行傳參，而只有設定了post的要求標頭才可以。

　　另外由於在ng中的參數都是使用json格式表達，因此需要引入jquery，使用其$.param("參數列表的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其中顯示的要求標頭正是我們設定的。

　　2.在後台進行解決

　　由於使用的是php，所以暫時用php的方法解決。在這個方法中，我們不修改要求標頭。因為get傳值是正常的，那麼，只要能夠得到post的值就好。既然ng向後台傳值了，即便是因為要求標頭不同，但是總會傳過來什麼的吧，既然能夠傳過來，就先擷取它。這個時候使用$GLOBALS[‘HTTP_RAW_POST_DATA‘]將這個傳過來的東西顯示出來。那麼這個$GLOBALS[‘HTTP_RAW_POST_DATA‘]是什麼呢？在網上查詢得知$HTTP_RAW_POST_DATA 變數包含有原始的 POST 資料。此變數僅在碰到未識別 MIME 類型的資料時產生,PHP不能識別的Content-Type類型的時候，會將http請求包中相應的資料填入變數$HTTP_RAW_POST_DATA。就是說現在這個要求標頭雖然是有衝突的，但是卻能夠顯示出來。如下：

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"}。發現這個結果是正確顯示了。那麼直接對齊進行操作不就可以了？好吧，那就先看看是什麼類型：使用gettype()得到的是string，就是說他是個json字串。那就使用json_decode()轉換，發現會報錯。好吧，放棄使用這個方法。

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

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

　　結果輸出正確的id。

轉載自：http://www.cnblogs.com/liuhongjin/p/6202141.html

ANGULAR $HTTP請求【轉】