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