溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細(xì)介紹“如何使用Springboot接收前端Ajax發(fā)送的json”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“如何使用Springboot接收前端Ajax發(fā)送的json”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。
通過 https://start.spring.io/ 獲得項(xiàng)目框架。在eclipse中導(dǎo)入下載的Maven項(xiàng)目。
Maven添加fastjson依賴包
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.62</version> </dependency>
定義Controller
@RestController
public class GetJsonReq {
@CrossOrigin
@RequestMapping(value = "/simple")
// json的結(jié)構(gòu)和內(nèi)部字段名稱可以與POJO/DTO/javabean完全對(duì)應(yīng)
public Map<String, String> getJsonBean(@RequestBody Beauty beauty) {
Map<String, String> 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的結(jié)構(gòu)較為復(fù)雜，不直接與POJO/DTO/javabean對(duì)應(yīng)。
public Map<String, String> getJsonComplex(@RequestBody JSONObject param) {
Map<String, String> 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)，因?yàn)間et(i)只會(huì)得到鍵值對(duì)。
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;
}
}POJO/DTO/JavaBean
注意Date字段要如何處理。
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 + "]";
}
}將JSON轉(zhuǎn)為Java對(duì)象使用@RequestBody 注解；將Java對(duì)象轉(zhuǎn)換為JSON使用@ResponseBody注解。
一旦使用@ResponseBody注解返回流程將不在經(jīng)過視圖解析器，而是直接將數(shù)據(jù)寫入到輸出流中，通過response的body返回?cái)?shù)據(jù)。如果處理請(qǐng)求方法返回的是 String 時(shí)@ResponseBody 注解不會(huì)進(jìn)行 JSON 轉(zhuǎn)換。響應(yīng)的 Content-Type 為 text/plain;charset=ISO-8859-1。如果處理請(qǐng)求方法返回的是除了 String 類型以外的其他Object 類型時(shí)，@ResponseBody注解會(huì)進(jìn)行 JSON 轉(zhuǎn)換。響應(yīng)的 Content-Type 為 application/json。
響應(yīng)體的字符編碼需要在@RequestBody 注解中設(shè)定：
//@RequestMapping(value = "/addUsers",produces = "text/plain;charset=utf-8") 返回String
//@RequestMapping(value = "/addUsers",produces = "application/json;charset=utf-8") 返回json對(duì)象
@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;
}借助jQuery來(lái)發(fā)送Ajax請(qǐng)求。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>發(fā)送json</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">function send1() {
var beauty = JSON.stringify({ //將JSON對(duì)象轉(zhuǎn)換為字符串
"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對(duì)象轉(zhuǎn)換為字符串
}
});
};
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>
<input type="button" name="btn1" id="s1" onclick="send1()" value="發(fā)送簡(jiǎn)單json" />
<br />
<hr />
<input type="button" name="btn2" id="s2" onclick="send2()" value="發(fā)送復(fù)雜json" />
</body>
</html>這里要注意：
script標(biāo)簽引入js的形式必須是雙標(biāo)簽，形如：
<script src="…js" …></script>
如果是形如<script src="…js" … />的單標(biāo)簽，將無(wú)法引入js。頁(yè)面提交的數(shù)據(jù)默認(rèn)content-type是application/x-www-form-urlcoded的編碼（鍵值對(duì)）。而@RequestBody注解只有在編碼為application/json時(shí)才能將JSON 格式的數(shù)據(jù)轉(zhuǎn)為 Java 對(duì)象。
對(duì)于jQuery一般是使用$.ajax來(lái)發(fā)送json請(qǐng)求，因?yàn)橹挥兴梢栽O(shè)置編碼格式（application/json）。
HTML5中如何實(shí)現(xiàn)JSON對(duì)象與字符串之間的相互轉(zhuǎn)換？
//string -> json
JSON.parse("...")
//json -> string
JSON.stringify(obj)同源策略
ajax請(qǐng)求須受到同源策略的影響。
跨域請(qǐng)求
在 JavaScript 的請(qǐng)求中當(dāng)一個(gè)請(qǐng)求 URL 的協(xié)議、域名、端口三者之間任意一個(gè)與當(dāng)前頁(yè)面 URL 不同時(shí)即為跨域。
ajax請(qǐng)求如何受同源策略限制
一個(gè)頁(yè)面的URL（origin）與同一頁(yè)面中ajax訪問的URL出現(xiàn)跨域時(shí)，ajax請(qǐng)求被服務(wù)器端block。
處理方式
前端：jsonp（json with padding）
jsonp的原理就是script標(biāo)簽不受同源策略的影響，所以通過script的src屬性來(lái)實(shí)現(xiàn)跨域。
//原生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);
//在頁(yè)面中，返回的JSON作為參數(shù)傳入回調(diào)函數(shù)中
functionhandleResponse(response){
// 對(duì)response數(shù)據(jù)進(jìn)行操作代碼
}
//jQuery GET
$.ajax({
async : true,
url : "https://api.douban.com/v2/book/search",
type : "GET",
dataType : "jsonp", // 返回的數(shù)據(jù)類型，設(shè)置為JSONP方式
jsonp : 'callback', //指定一個(gè)查詢參數(shù)名稱來(lái)覆蓋默認(rèn)的 jsonp 回調(diào)參數(shù)名 callback
jsonpCallback: 'handleResponse', //設(shè)置回調(diào)函數(shù)名
data : {
q : "javascript",
count : 1
},
success: function(response, status, xhr){
console.log('狀態(tài)為：' + status + ',狀態(tài)是：' + xhr.statusText);
console.log(response);
}
});
//jQuery POST
$.ajax({
url:'http://localhost:8888/other/other.jsp',
type:'post',
data:{'params':'fromjsonp'},
dataType: "jsonp",
jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為: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
//限定發(fā)送 ajax的頁(yè)面的初始url，即origins（可多個(gè)origin url）。其他的不受理。
//不給出origins則處理所有origin url的跨域 ajax請(qǐng)求。
@CrossOrigin(origins ="http://localhost:8888")
public Object addUsers(@RequestBody Users users)throws Exception{
System.out.println(users);
return users;
}
}讀到這里，這篇“如何使用Springboot接收前端Ajax發(fā)送的json”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼