本文小编为大家详细介绍“如何使用Springboot接收前端Ajax发送的json”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何使用Springboot接收前端Ajax发送的json”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
我们提供的服务有：网站制作、网站设计、微信公众号开发、网站优化、网站认证、甘南ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的甘南网站制作公司
1. 后端Springboot
通过 https://start.spring.io/ 获得项目框架。在eclipse中导入下载的Maven项目。
com.alibaba
fastjson
1.2.62
@RestController
public class GetJsonReq {
@CrossOrigin
@RequestMapping(value = "/simple")
// json的结构和内部字段名称可以与POJO/DTO/javabean完全对应
public Map getJsonBean(@RequestBody Beauty beauty) {
Map result = null;
if (beauty != null) {
System.out.println("美女的名字：" + beauty.getName());
System.out.println("美女的年龄：" + beauty.getAge());
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
System.out.println("美女出道日期：" + sdf.format(beauty.getDate()));
System.out.println("美女的收入：" + beauty.getSalary());
result = new HashMap<>();
result.put("code", "1");
result.put("msg", "ok");
}
return result;
}
@CrossOrigin
@RequestMapping(value = "/complex")
//json的结构较为复杂，不直接与POJO/DTO/javabean对应。
public Map getJsonComplex(@RequestBody JSONObject param) {
Map result = null;
if (param != null) {
JSONObject master = param.getJSONObject("master");
Beauty beauty = (Beauty) JSONObject.toJavaObject(master, Beauty.class);
System.out.println(beauty);
JSONArray mm = param.getJSONArray("MM");
for (int i = 0; i < mm.size(); i++) {
// 这里不能使用get(i)，因为get(i)只会得到键值对。
JSONObject json = mm.getJSONObject(i);
Beauty bt = (Beauty) JSONObject.toJavaObject(json, Beauty.class);
System.out.println(bt);
}
result = new HashMap<>();
result.put("code", "1");
result.put("msg", "ok");
}
return result;
}
}public class Beauty {
private String name;
private int age;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
private Date date;
private double salary;
public Beauty() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public Date getDate() {
return date;
}
public void setDate(Date date) {
this.date = date;
}
public double getSalary() {
return salary;
}
public void setSalary(double salary) {
this.salary = salary;
}
@Override
public String toString() {
return "Beauty [name=" + name + ", age=" + age + ", date=" + date + ", salary=" + salary + "]";
}
}一旦使用@ResponseBody注解返回流程将不在经过视图解析器，而是直接将数据写入到输出流中，通过response的body返回数据。如果处理请求方法返回的是 String 时@ResponseBody 注解不会进行 JSON 转换。响应的 Content-Type 为 text/plain;charset=ISO-8859-1。如果处理请求方法返回的是除了 String 类型以外的其他Object 类型时，@ResponseBody注解会进行 JSON 转换。响应的 Content-Type 为 application/json。
响应体的字符编码需要在@RequestBody 注解中设定：
//@RequestMapping(value = "/addUsers",produces = "text/plain;charset=utf-8") 返回String
//@RequestMapping(value = "/addUsers",produces = "application/json;charset=utf-8") 返回json对象
@RequestMapping(value = "/addUsers",produces = MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")
@ResponseBody
@CrossOrigin(origins ="http://localhost:8888")
public Object addUsers(@RequestBody Users users)throws Exception{
System.out.println(users);
return users;
}2. 前端通过Ajax发送json
发送json
function send1() {
var beauty = JSON.stringify({ //将JSON对象转换为字符串
"name": "小甜甜",
"age": 26,
"salary": 200000,
"date": "2019-08-05 08:04:13"
});
$.ajax({
type: 'POST',
url: "http://localhost:8080/simple",
data: beauty, //beauty是字符串
contentType: "application/json",
dataType: "json",
success: function(message) {
alert(JSON.stringify(message)) //将JSON对象转换为字符串
}
});
};
function send2() {
var beauty = JSON.stringify({
"MM": [{
"name": "春花",
"age": 27,
"salary": 20000,
"date": "2017-05-19 09:33:14"
}, {
"name": "秋香",
"age": 30,
"salary": 30000,
"date": "2019-10-21 17:04:33"
}],
"master": {
"name": "小甜甜",
"age": 26,
"salary": 200000,
"date": "2019-08-05 08:04:13"
}
});
$.ajax({
type: "POST",
url: "http://localhost:8080/complex",
contentType: "application/json; charset=utf-8",
data: beauty,
dataType: "json",
success: function(message) {
alert("提交成功" + JSON.stringify(message));
},
error: function(message) {
alert("提交失败" + JSON.stringify(message));
}
});
}
这里要注意：
script标签引入js的形式必须是双标签，形如：
如果是形如的单标签，将无法引入js。
页面提交的数据默认content-type是application/x-www-form-urlcoded的编码（键值对）。而@RequestBody注解只有在编码为application/json时才能将JSON 格式的数据转为 Java 对象。
对于jQuery一般是使用$.ajax来发送json请求，因为只有它可以设置编码格式（application/json）。
//string -> json
JSON.parse("...")
//json -> string
JSON.stringify(obj)3. 跨域访问
前端：jsonp（json with padding）
jsonp的原理就是script标签不受同源策略的影响，所以通过script的src属性来实现跨域。
//原生js
var script = document.createElement("script");
script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);
//在页面中，返回的JSON作为参数传入回调函数中
functionhandleResponse(response){
// 对response数据进行操作代码
}
//jQuery GET
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
jsonpCallback: 'handleResponse', //设置回调函数名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('状态为：' + status + ',状态是：' + xhr.statusText);
console.log(response);
}
});
//jQuery POST
$.ajax({
url:'http://localhost:8888/other/other.jsp',
type:'post',
data:{'params':'fromjsonp'},
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
success: function(data){
alert("through jsonp,receive data from other domain : "+data.result);
},
error: function(){
alert('fail');
}
});后端：@CrossOrigin
@Controller
@RequestMapping("/user")
public class UsersController {
@RequestMapping(value = "/addUsers",produces = MediaType.APPLICATION_JSON_VALUE+";charset=utf-8")
@ResponseBody
//限定发送 ajax的页面的初始url，即origins（可多个origin url）。其他的不受理。
//不给出origins则处理所有origin url的跨域 ajax请求。
@CrossOrigin(origins ="http://localhost:8888")
public Object addUsers(@RequestBody Users users)throws Exception{
System.out.println(users);
return users;
}
}读到这里，这篇“如何使用Springboot接收前端Ajax发送的json”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。
网页标题：如何使用Springboot接收前端Ajax发送的json
网站路径：
http://cdkjz.cn/article/jhcsij.html
