一、問題的來源
我們都知道向后台傳參可以使用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。