AngularJs 表单提交数据不能以key-value 形式传到后台的解决方案
项目开发中遇到一个很常见的问题,估计使用AngularJs开发项目的好多人也遇到类似的问题,AngularJs表单提交,表单项已绑定到scope中,例如绑定数据model.name,但当提交model时,model中所有的数据并没有像普通form表单提交那样,默认帮form表单中的所有元素以key-value的方式提交到后台,而是以一串字符串的形式传到后台,这样明显不是我们想要的结果。后台终于在stackoverflow找到了解决方案(这里感慨下,stackoverflow真的很强大,好多疑难杂症都可以在stackoverflow中得到解决,而且在上面问问题,很快就有牛人帮忙),这里做了部分修改,这样就可以达到我想要的结果了,在这里列出代码,供遇到同样问题的同胞们做个参考。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46//设置模块初始化参数
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的形式正常传到后台,这样后台就能很方便的进行处理了~~~
1 | $http({ |
控制台中这样的结果才是我们想要的!