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其中显示的请求头正是我们设置的。