AJAXを使用してパスJSONオブジェクト
次の例は、JSONオブジェクトAJAX、JSONの戻りデータ・フォーマットを送ります
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$アヤックス({
URL:"API /ユーザー"、
タイプ:"POST" 、
タイムアウト:txnTimeOut、
非同期
:
真
、
データ型:"JSON" 、
データ:{ ユーザー名:
"ルーシー" }、
success:
function(e){
if($.txnIsSuzccess(e.respCode)){
console.log(e);
}
else{
exceptionHandle(e);
}
},
error:
function(e){
errorHandle(e);
}
});
|
注意:这里不能加下面这行,否则数据会传不到后台
1
|
contentType:
'application/json;charset=UTF-8',
|
后台代码
1
2
3
4
5
6
7
|
@PostMapping(value =
"/api/user", produces =
"application/json;charset=utf-8")
public Student (String username) {
return
null;
}
|
1
2
|
produces =
"application/json;charset=utf-8"
|
使用ajax传JSON字符串,使用@RequestBody接收
传递json格式字符串,返回json数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$.ajax({
url:
"find",
type:
"POST",
timeout: txnTimeOut,
async:
true,
contentType:
'application/json;charset=UTF-8',
dataType:
"json",
data:
'{"name":"手机","price":999}',
success:
function(e){
if($.txnIsSuzccess(e.respCode)){
console.log(e);
}
else{
exceptionHandle(e);
}
},
error:
function(e){
errorHandle(e);
}
});
|
后台代码
1
2
3
4
5
6
7
8
9
|
@PostMapping(value =
"/find", consumes =
"application/json;charset=utf-8", produces =
"application/json;charset=utf-8")
public User findUserByName(@RequestBody User user) {
log.info(
"user>>>>> " + user);
return userService.findByName(
"");
}
|
ajax代码说明
1
2
3
4
5
6
|
contentType:
'application/json;charset=UTF-8',
dataType:
"json",
|
java代码说明
1
2
3
4
5
6
7
|
@PostMapping(value =
"/find", consumes =
"application/json;charset=utf-8", produces =
"application/json;charset=utf-8")
public User findUserByName(@RequestBody User user)
|
注意: ajax代码中必须指定contentType为json数据格式,同时java代码中必须在参数前使用@RequestBody注解,
否则无法进行参数绑定,后台无法获取前台传递的数据
User类
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
|
public
class User {
private String name;
private
double price;
public User() {
}
public User(String name, double price) {
this.name = name;
this.price = price;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
@Override
public String toString() {
return
"User{" +
"name='" + name +
''' +
", price=" + price +
'}';
}
}
|
使用ajax请求key/value,输出是json
ajax代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function responseJson(){
$.ajax({
type:
'post',
url:
'api/user',
data:
'name=手机&price=999',
success:
function(data){
alert(data.name);
}
});
}
|
java代码
1
2
3
4
5
6
7
8
|
@PostMapping(value =
"/api/user")
public User findUserByName(@RequestParam(value = "name") String name, @RequestParam(value = "price") double price) {
log.info(
"name>>>>>>>>" + name +
" price>>>>>>>>" + price);
return userService.findByName(name);
}
|
代码说明
请求是key/value类型,这里不需要指定contentType,因为默认就 是key/value类型
博客中若有错误,欢迎大家指出噢,大家共同学习,共同提高,嘿嘿
分享
新浪微博
QQ空间
QQ好友
豆瓣
Facebook
取消
原文:大专栏 spring mvc+ajax 实现json格式数据传递