近期项目中使用angular，结果发现后台没法获取參数，所以，略微研究了一下两者在发送ajax时的差别。
注意angular和jquery的ajax请求是不同的。
在jquery中，官方文档解释contentType默认是 application/x-www-form-urlencoded; charset=UTF-8
|
而參数data，jquery是进行了转换的。
|
看以下这段
Sending Data to the Server
By 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> |
页面上有三个button：
第一个使用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"; }} |