angularjs中$http模块POST请求request payload转form data

于 2016-01-27 10:29:09 发布
阅读量3.5k 收藏 1
点赞数


这是我后台SpringMVC控制器接收isform参数的方法，只是简单的打出它的值：
?
1
2
3
4
5
6
7
8
@RequestMapping (method = RequestMethod.POST)
     @ResponseBody
     public Map<String, Object> save(
             @RequestParam (value = "isform" , required = false ) String isform) {
         System.out.println( "isform value: " + isform);
         return null ;
 
     }
前台页面发送一个post提交表单的请求

发现后台没有取到值

后边我想到的第一种方案是在控制器方法参数里加requestbody来接收json参数，改成如下：

?
1
2
3
4
5
6
7
8
@RequestMapping (method = RequestMethod.POST)
     @ResponseBody
     public Map<String, Object> save(
             @RequestParam (value = "isform" , required = false ) @RequestBody String isform) {
         System.out.println( "isform value: " + isform);
         return null ;
 
     }
但是isform的值结果还是为null，

接着我又对比了下以前的项目中，接收post请求的参数，发现一个有趣的现象，

下边是Angular的默认请求头，

$httpProvider.defaults.headers.post: (header defaults for POST requests)

Content-Type: application/json

$httpProvider.defaults.headers.put(header defaults for PUT requests)

Content-Type: application/json

其中Angular的post和put都是application/json，

而jquery的post请求的"Content-Type"默认为"  application/x-www-form-urlencoded "，于是我更改了angular的默认Content-Type，
?
1
2
3
4
5
app.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' ;
 
});
接下来的请求body变成了这样，但是后边还是没有取到isform的值，

又查了半天，在一个老外的博客上发现了原因，链接如下：

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

By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo=bar&baz=moe serialization. AngularJS, however, transmits data using Content-Type: application/json and { "foo": "bar", "baz": "moe" } JSON serialization

自己翻译了：

默认情况下，jQuery传输数据使用Content-Type: x-www-form-urlencodedand和类似于"foo=bar&baz=moe"的序列，然而AngularJS，传输数据使用Content-Type: application/json和{ "foo": "bar", "baz": "moe" }这样的json序列。

所以下把Content-Type设置成x-www-form-urlencodedand之后，还需要转换序列的格式，

下边是我经过老外实践而自己测试过的最终方案：

?
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
47
48
app.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) {
         /**
          * The workhorse; converts an object to x-www-form-urlencoded serialization.
          * @param {Object} obj
          * @return {String}
          */
         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;
     }];
});
在angular模块中添加以上代码，我们来看下效果：

发现与jquery的post请求风格一致了，有木有！！！

看下后台的参数接收情况，

isform已经可以正常接收到参数了，大功告成！

这是我后台SpringMVC控制器接收isform参数的方法，只是简单的打出它的值：
?
1
2
3
4
5
6
7
8
@RequestMapping (method = RequestMethod.POST)
     @ResponseBody
     public Map<String, Object> save(
             @RequestParam (value = "isform" , required = false ) String isform) {
         System.out.println( "isform value: " + isform);
         return null ;
 
     }
前台页面发送一个post提交表单的请求

发现后台没有取到值

后边我想到的第一种方案是在控制器方法参数里加requestbody来接收json参数，改成如下：

?
1
2
3
4
5
6
7
8
@RequestMapping (method = RequestMethod.POST)
     @ResponseBody
     public Map<String, Object> save(
             @RequestParam (value = "isform" , required = false ) @RequestBody String isform) {
         System.out.println( "isform value: " + isform);
         return null ;
 
     }
但是isform的值结果还是为null，

接着我又对比了下以前的项目中，接收post请求的参数，发现一个有趣的现象，

下边是Angular的默认请求头，

$httpProvider.defaults.headers.post: (header defaults for POST requests)

Content-Type: application/json

$httpProvider.defaults.headers.put(header defaults for PUT requests)

Content-Type: application/json

其中Angular的post和put都是application/json，

而jquery的post请求的"Content-Type"默认为"  application/x-www-form-urlencoded "，于是我更改了angular的默认Content-Type，
?
1
2
3
4
5
app.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' ;
 
});
接下来的请求body变成了这样，但是后边还是没有取到isform的值，

又查了半天，在一个老外的博客上发现了原因，链接如下：

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

By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo=bar&baz=moe serialization. AngularJS, however, transmits data using Content-Type: application/json and { "foo": "bar", "baz": "moe" } JSON serialization

自己翻译了：

默认情况下，jQuery传输数据使用Content-Type: x-www-form-urlencodedand和类似于"foo=bar&baz=moe"的序列，然而AngularJS，传输数据使用Content-Type: application/json和{ "foo": "bar", "baz": "moe" }这样的json序列。

所以下把Content-Type设置成x-www-form-urlencodedand之后，还需要转换序列的格式，

下边是我经过老外实践而自己测试过的最终方案：

?
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
47
48
app.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) {
         /**
          * The workhorse; converts an object to x-www-form-urlencoded serialization.
          * @param {Object} obj
          * @return {String}
          */
         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;
     }];
});
在angular模块中添加以上代码，我们来看下效果：

发现与jquery的post请求风格一致了，有木有！！！

看下后台的参数接收情况，

isform已经可以正常接收到参数了，大功告成！

登辉
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值