最近项目中使用angular，结果发现后台没法获取参数，所以，稍微研究了一下两者在发送ajax时的区别。
注意angular和jquery的ajax请求是不同的。
在jquery中，官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8
|
而参数data，jquery是进行了转换的。
|
看下面这段
Sending Data to the ServerBy default, Ajax requests are sent using the GET HTTP method. If the POST method is required, the method can be specified by setting a value for the The |
所以，jquery是javascript对象转换了字符串，传给后台。在SpringMVC中，就可以使用@RequestParam注解或者request.getParameter()方法获取参数。
而在angular中，$http的contentType默认值是
application/json;charset=UTF-8
这样在后台，SpringMVC通过@RequestParam注解或者request.getParameter()方法是获取不到参数的。
写了demo程序。html页面
|
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
|
<!DOCTYPE html><html><head> <title></title> <script src="js/jquery.js"></script> <script src="js/angular.js"></script></head><body ng-app="myApp"><div> <h1>Hello World</h1></div><div> <span>Angular ajax:</span> <a href="#" ng-controller="btnCtrl" ng-click="asave()">Button</a></div><div> <span>jQuery ajax:</span> <a href="#" id="jBtn">Button</a></div><div> <span>Angular as jQuery ajax:</span> <a href="#" ng-controller="btnCtrl" ng-click="ajsave()">Button</a></div></body><script src="js/index.js"></script></html> |
页面上有三个按钮：
第一个使用angular 的 $http发送ajax请求
第二个使用jquery的 $ajax发送ajax请求
第三个使用angular的$http方法按照jquery中的方式发送ajax请求
|
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
|
var myApp = angular.module('myApp',[]);var btnCtrl = myApp.controller('btnCtrl',['$scope','$http',function($scope,$http){ $scope.asave = function(){ var user = { name : 'zhangsan', id : '3' } $http({method:'POST',url:'/asave',data:user}).success(function(data){ console.log(data); }) }; $scope.ajsave = function(){ var data = 'namelisi&id=4' $http({ method: 'POST', url: 'ajsave', data: data, // pass in data as strings headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} }).success(function (data) { console.log(data); }); };}]);$('#jBtn').on('click',function(){ $.ajax({ type : 'POST', url : 'jsave', data : {name:'wangwu',id:'5'}, dataType:'json', success : function(data){ console.log(data); } })}); |
使用angular发送请求（asave方法）时，使用firbug看：
使用jquery发送请求（jsave方法）时，使用firbug看：
所以，如果想用angular达到相同的效果，主要有点：
1.修改Content-Type为application/x-www-form-urlencoded; charset=UTF-8
2.请求参数的格式 key=value的格式，如果，多个，则使用&连接
ajsave方法，经过改造后，用firbug看源代码
这是前端的发送，那后端使用springmvc接受参数，怎么处理呢？
以前使用jquery，一般使用@RequestParam注解或者request.getParameter方法接受数据。但是使用angular后，这样是接受不到数据的。
如果想接受，可以这样，定义一个接受的类，要有setter和getter方法。
定义User类
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
public class User { public String name; public String id; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getId() { return id; } public void setId(String id) { this.id = id; }} |
在Controller中
|
1
2
3
4
5
6
7
|
@RequestMapping("/asave") @ResponseBody public String asave(@RequestBody User user){ System.out.println("name---"+user.getName()); System.out.println("id---"+user.getId()); return "ok"; } |
所以，angular默认的这种请求的传参方式，还得定义一个类，所以，在使用angular发送请求时，可以按照上面说的方法，改成jquery方式，这样，对于一些简单参数，获取就比较方便一些。
完整controller代码：
|
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
|
@Controllerpublic class MyController { @RequestMapping("/test") @ResponseBody public String test(){ return "hello world"; } @RequestMapping("/asave") @ResponseBody public String asave(@RequestBody User user){ System.out.println("name---"+user.getName()); System.out.println("id---"+user.getId()); return "ok"; } @RequestMapping("/jsave") @ResponseBody public String jsave(@RequestParam String name, @RequestParam String id){ System.out.println("name---"+name); System.out.println("id---"+id); return "ok"; } @RequestMapping("/ajsave") @ResponseBody public String ajsave(@RequestParam String name, @RequestParam String id){ System.out.println("name---"+name); System.out.println("id---"+id); return "ok"; }} |