把Angular中的$http变成jQuery.ajax()一样，可以让后台(php)轻松接收到参数

　　最近接到一个手机项目，我决定用ionic + php + mysql来实现。ionic是一个前端框架，主要用于手机端，它融合了html5、css3、angularJS于一体，用起来很顺手。

　　开始构建项目框架，既然有了angular，那么restful就是标配，这就像LMAP一样是一个黄金组合，然后用php设计restful，用angular进行对接，这看起来很美好，做起来可是很痛苦啊！大家先看两段代码

(function($) {
  jQuery.post('/tab', { name : 'john' }).success(function(data) {
    // ...
  });
})(jQuery);

var MainCtrl = function($scope, $http) {
  $http.post('/tab', { name : 'john'}).success(function(data) {
    // ...
  });
};

　　当你用$_POST['name']接收参数时你会发现jQuery可以而Angular却不行！为什么会这样呢？问题的根源就在于jQuery是把参数处理成字符串发送的，而Angular是把参数处理成JSON对象发送的。具体来说jQuery发送数据使用的请求头是 Content-Type: x-www-form-urlencoded ，他把    { name : 'john' }  serialize 序列化成了 name = john ,而Angular使用的请求头是 Content-Type: application/json ，他把  { name : 'john' } serialize成了 { "name" : "john" } ，而且我顶你个肺类，一些服务器语言本身并不能unserialize，比如php。

　　既然搞清楚了原因，那我们就来搞定它：

     //设置请求头
      $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8;'
      /**
       * The workhorse; 把对象序列化（ x-www-form-urlencoded 形式）.
       * @param {Object} obj
       * @return {String}
       */
      var param = function(obj) {
        var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

        for(name in obj) {
          value = obj[name];

          if(value instanceof Array) {
            for(i=0; i<value.length; ++i) {
              subValue = value[i];
              fullSubName = name + '[' + i + ']';
              innerObj = {};
              innerObj[fullSubName] = subValue;
              query += param(innerObj) + '&';
            }
          }
          else if(value instanceof Object) {
            for(subName in value) {
              subValue = value[subName];
              fullSubName = name + '[' + subName + ']';
              innerObj = {};
              innerObj[fullSubName] = subValue;
              query += param(innerObj) + '&';
            }
          }
          else if(value !== undefined && value !== null)
            query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
        }

        return query.length ? query.substr(0, query.length - 1) : query;
      };
      //重写$http service 的 transformRequest
      $httpProvider.defaults.transformRequest = [function(data){
        return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
      }]

　　把上面代码加到

angular.module('starter', []).config(function($httpProvider){

    //...
});

　　就可以了。

　　参考：http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/