最近项目中使用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";
}
} |