AngularJs 表单提交数据不能以key-value 形式传到后台的解决方案

2015-09-17 人点击

AngularJs JavaScript

项目开发中遇到一个很常见的问题，估计使用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,  
    })

控制台中这样的结果才是我们想要的！

这里写图片描述