spring mvc + ajax achieve data transfer format json

Pass JSON object using ajax

The following example sends json object ajax, json return data format

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$.ajax({ url: "api/user", type: "POST", timeout: txnTimeOut, async: true, dataType: "json", data: { username : "lucy"}, //contentType:'application/json;charset=UTF-8', success: function(e){ if($.txnIsSuzccess(e.respCode)){ //window.location.href=e.codeUrl; 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属性表示返回数据类型为json 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

//consumes的作用是指定请求数据的格式类型,可以同时指定数据格式类型以及字符编码 //produces的作用是指定返回值类型,不但可以设置返回值类型还可以设定返回值的字符编码 @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指定传递的数据为json字符串(如果不指定为application/json;charset=UTF-8, //后台无法进行参数绑定) contentType: 'application/json;charset=UTF-8', //关键是要加上这行 //dataType指定返回的数据为json数据格式 dataType: "json",

java代码说明

1 2 3 4 5 6 7

//consumes的作用是指定请求数据的格式类型,可以同时指定数据格式类型以及字符编码 //produces的作用是指定返回值类型,不但可以设置返回值类型还可以设定返回值的字符编码 @PostMapping(value = "/find", consumes = "application/json;charset=utf-8", produces = "application/json;charset=utf-8") //@RequestBody注解用来接受json数据,进行参数绑定(如果不在参数前使用此注解,无法进行参数绑定) //@ResponseBody注解用来生成json数据 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

/** * Created by zhouxu on 2017/12/15 15:58. */ 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

//请求key/value，输出是json function responseJson(){ $.ajax({ type: 'post', url: 'api/user', //请求是key/value这里不需要指定contentType，因为默认就 是key/value类型 //contentType:'application/json;charset=utf-8', //数据格式是json串，商品信息 data: 'name=手机&price=999', success: function(data){ //返回json结果 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) { //System.out.println("name>>>>>>>>" + name + " price>>>>>>>>" + price); log.info( "name>>>>>>>>" + name + " price>>>>>>>>" + price); return userService.findByName(name); }

代码说明

请求是key/value类型,这里不需要指定contentType，因为默认就 是key/value类型

博客中若有错误,欢迎大家指出噢,大家共同学习,共同提高,嘿嘿

分享

• 新浪微博




• QQ空间




• QQ好友




• 豆瓣




• Facebook




• Twitter

取消

原文:大专栏  spring mvc+ajax 实现json格式数据传递