AngularJs 表單提交數據不能以key-value 形式傳到後臺的解決方案

項目開發中遇到一個很常見的問題，估計使用AngularJs開發項目的好多人也遇到相似的問題，AngularJs表單提交，表單項已綁定到scope中，例如綁定數據model.name，但當提交model時，model中全部的數據並無像普通form表單提交那樣，默認幫form表單中的全部元素以key-value的方式提交到後臺，而是以一串字符串的形式傳到後臺，這樣明顯不是咱們想要的結果。後臺終於在stackoverflow找到了解決方案（這裏感慨下，stackoverflow真的很強大，好多疑難雜症均可以在stackoverflow中獲得解決，並且在上面問問題，很快就有牛人幫忙），這裏作了部分修改，這樣就能夠達到我想要的結果了，在這裏列出代碼，供遇到一樣問題的同胞們作個參考。

//設置模塊初始化參數
var setModuleRequest = function(module) {
      module.config( function($httpProvider) {
          $httpProvider.defaults.headers.put[ 'Content-Type'] = 'application/x-www-form-urlencoded' ;
          $httpProvider.defaults.headers.post[ 'Content-Type'] = 'application/x-www-form-urlencoded' ;
          // Override $http service's default transformRequest
          $httpProvider.defaults.transformRequest = [ function(data) { 
              var param = function(obj) {
                  var query = '' ;
                  var 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;
              };

              return angular.isObject(data) && String(data) !== '[object File]'
                      ? param(data)
                      : data;
          }];
      });
}

這裏主要是針對聲明的模塊中使用 http post方式提交的地方進行一個參數設置，這樣設置以後，使用$http提交表單中model對象時就能達到model中的每一個字段都以key-value的形式正常傳到後臺，這樣後臺就能很方便的進行處理了~~~

$http({ method : 'POST', url : encodeURI(encodeURI(url)), data : $scope.model, })

控制檯中這樣的結果纔是咱們想要的！

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。