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