一文讀懂JavaWeb前后端數(shù)據(jù)交互
一、HTTP是前后端數(shù)據(jù)交互的載體
Request的請(qǐng)求體中負(fù)載著前端向后端發(fā)送請(qǐng)求的數(shù)據(jù);
Response的響應(yīng)體中負(fù)載著后端向前端返回響應(yīng)的數(shù)據(jù);
當(dāng)然,Request的請(qǐng)求行中的URL中也可以負(fù)載著前端向后端發(fā)送請(qǐng)求的數(shù)據(jù),這個(gè)后面會(huì)詳細(xì)說(shuō)明。
1. HTTP Request
Request模型

Request實(shí)例

2. HTTP Response
Repsonse模型

Response實(shí)例

二、數(shù)據(jù)交互格式 JSON
1. JSON對(duì)象與JSON字符串
- JSON字符串就是符合JSON語(yǔ)法的字符串
- 每一種語(yǔ)言都有自己的JSON語(yǔ)法,所以每一種語(yǔ)言都有自己形式的JSON字符串和符合自己形式的JSON對(duì)象。
2. 不同語(yǔ)言中的JSON對(duì)象與JSON字符串互換
JavaScript
// json字符串轉(zhuǎn)json對(duì)象,調(diào)用parse方法:
//符合JSON語(yǔ)法的對(duì)象,所以是JSON字符串
var person='{"name":"zhangsan","sex":"男","age":"24"}';
var personObject = JSON.parse(person);
alert(personObject.name);//zhangsan
// json對(duì)象轉(zhuǎn)為json字符串,調(diào)用stringify方法:
//符合JSON語(yǔ)法的對(duì)象,所以是JSON對(duì)象
var person={"name":"zhangsan","sex":"男","age":"24"};
var personString = JSON.stringify(person);
alert(personString);
Java
// json對(duì)象轉(zhuǎn)json字符串,以JSONObject為中介
Student stu=new Student();
stu.setName("JSON");
stu.setAge("23");
stu.setAddress("北京市西城區(qū)");
JSONObject json = JSONObject.fromObject(stu);
String strJson=json.toString();
System.out.println("strJson:"+strJson); // trJson:{"address":"北京市西城區(qū)","age":"23","name":"JSON"}
// json字符串轉(zhuǎn)json對(duì)象
String objectStr="{\"name\":\"JSON\",\"age\":\"24\",\"address\":\"北京市西城區(qū)\"}";
JSONObject jsonObject=JSONObject.fromObject(objectStr);
Student stu=(Student)JSONObject.toBean(jsonObject, Student.class);
System.out.println("stu:"+stu); //stu:Student [name=JSON, age=24, address=北京市西城區(qū)]
三、前端如何發(fā)送數(shù)據(jù)
1. 表單發(fā)送數(shù)據(jù)
利用form表單進(jìn)行傳遞:form表單中的有一個(gè)action屬性,向后端提交數(shù)據(jù)可以利用action,action后面接的就是后臺(tái)處理的url
<form action="${pageContext.request.contextPath}/login.action" method="post">
用戶名<input type="text" name="username"><br>
密碼<input type="password" name="password"><br>
</form>
2. JSON對(duì)象發(fā)送數(shù)據(jù)
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
<!--Json對(duì)象-->
var user = {
"username": "hahah",
"password": "123456"
};
$.ajax({
url:"/testJson",
type: "GET",
async: true,
data: user,//Json對(duì)象
dataType: 'json',
success: function (data) {
}
});
</script>
3. JSON 字符串方式
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
var user = {
"username": "hahah",
"password": "123456"
};
$.ajax({
url:"/testJson3",
type: "POST",
async: true,
contentType: "application/json;charset=UTF-8", //使用 application/json;charset=UTF-8
data: JSON.stringify(user), //將JSON對(duì)象轉(zhuǎn)換為JSON字符串
dataType: 'json',
success: function (data) {
}
});
</script>
四、前端如何接收數(shù)據(jù)
寫Ajax代碼訪問(wèn)后端接口
$.ajax({
url:'/heap', //這是后端接口的url
method:'get',
success:function (res) {
//res便是的數(shù)據(jù)便是后端拿到的數(shù)據(jù)
//這里需要注意:res為局部變量,
//所以需要在方法外定義一個(gè)變量把res賦值給他,才能在方法之外使用。
},
})
此時(shí)res就是JSON對(duì)象,這是因?yàn)椋篅ResponseBody注解主要是用來(lái)返回json數(shù)據(jù)給前端,如果你很懶,只想返回一個(gè)對(duì)象,那么加上@ResponseBody可以實(shí)現(xiàn)將返回的對(duì)象自動(dòng)轉(zhuǎn)換為json傳返回給前端。
但是不是說(shuō)json有兩種格式嘛…一個(gè)json對(duì)象,一個(gè)json字符串。你怎么證明你獲得的就是json對(duì)象而不是json字符串呢。在前端代碼中只需修改一處即可證明

如果是對(duì)象,那么就有屬性,我就來(lái)打印這個(gè)屬性,有數(shù)據(jù)就可以說(shuō)明是json對(duì)象

五、后端如何請(qǐng)求數(shù)據(jù)
1. get 請(qǐng)求 和 post請(qǐng)求
- get請(qǐng)求不存在請(qǐng)求實(shí)體部分,鍵值對(duì)參數(shù)放置在 URL 尾部;
- get請(qǐng)求存在請(qǐng)求實(shí)體部分,鍵值對(duì)參數(shù)放置在 請(qǐng)求的請(qǐng)求體;
- get和post相比,要快,是因?yàn)間et和post的請(qǐng)求過(guò)程不同,不多前三步都是一樣的,都是要先經(jīng)過(guò)和服務(wù)器的三次握手:
1.瀏覽器請(qǐng)求tcp連接(第一次握手)
2.服務(wù)器答應(yīng)進(jìn)行tcp連接(第二次握手)
3.瀏覽器確認(rèn),并發(fā)送get請(qǐng)求頭和數(shù)據(jù)(第三次握手,這個(gè)報(bào)文比較小,所以http會(huì)在此時(shí)進(jìn)行第一次數(shù)據(jù)發(fā)送)
- get請(qǐng)求在第四步就會(huì)接收到了服務(wù)器返回的數(shù)據(jù),而post請(qǐng)求在第四步是接收到服務(wù)器發(fā)送的100 continue指令,客戶端在發(fā)送數(shù)據(jù)請(qǐng)求服務(wù)端,服務(wù)端才會(huì)去返回?cái)?shù)據(jù),
- 就是說(shuō)POST比GET多進(jìn)行了一次客戶端和服務(wù)器的打交道,GET請(qǐng)求產(chǎn)生了一個(gè)TCP數(shù)據(jù)包,而POST請(qǐng)求產(chǎn)生了兩個(gè)TCP數(shù)據(jù)包
2. @RequestParam
@RequestParam綁定參數(shù)機(jī)制
- 如果不寫@RequestParam(xxx)的話,那么會(huì)自動(dòng)匹配方法參數(shù),如果命名不同會(huì)默認(rèn)接收為空。
@RequestParam有三個(gè)配置參數(shù):
- required 是否必須傳遞參數(shù),默認(rèn)為 true,必須。
- defaultValue 可設(shè)置請(qǐng)求參數(shù)的默認(rèn)值。
- value 為接收url的參數(shù)名(相當(dāng)于key值)。
表單格式 +GET如果http請(qǐng)求是GET,則表單參數(shù)會(huì)以放入U(xiǎn)RL的查詢參數(shù)中,例如:
// http://localhost:port/form?phone=roger&password=123456
@RequestMapping("form")
@ResponseBody
public User form(@RequestParam("phone")String phone,@RequestParam("password")String password){
return new User(phone,password);
}
表單格式+POST如果請(qǐng)求方法是POST,表單數(shù)據(jù)存在請(qǐng)求體中??梢栽贑ontroller方法參數(shù)上加上@RequestParam將數(shù)據(jù)綁定在參數(shù)上。
// http://localhost:port/form
@RequestMapping("form")
@ResponseBody
public User form(@RequestParam("phone")String phone,@RequestParam("password")String password){
return new User(phone,password);
}
3. @RequestBody
表單格式+POST
// http://localhost:port/form1
@RequestMapping("form1")
@ResponseBody
public User form1(@RequestBody MultiValueMap<String,String> user){
String phone = user.getFirst("phone");
String password = user.getFirst("password");
return new User(phone,password);
}
JSON格式+POSTbody 里面的 json 語(yǔ)句的 key 值要與后端實(shí)體類的屬性一一對(duì)應(yīng)。
@Controller
@RequestMapping(value = "saveUser", method=RequestMethod.POST )
@ResponseBody
public void saveUser(@RequestBody User user) {
userService.batchSave(user);
}
六、后端如何返回?cái)?shù)據(jù)
@ResponseBody注解主要是用來(lái)返回json數(shù)據(jù)給前端,如果你很懶,只想返回一個(gè)對(duì)象,那么加上@ResponseBody可以實(shí)現(xiàn)將返回的對(duì)象自動(dòng)轉(zhuǎn)換為json傳返回給前端。
到此這篇關(guān)于一文讀懂JavaWeb前后端數(shù)據(jù)交互的文章就介紹到這了,更多相關(guān)Java前后端數(shù)據(jù)交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
SpringBoot導(dǎo)出PDF的四種實(shí)現(xiàn)方法詳解
在Spring?Boot應(yīng)用程序中實(shí)現(xiàn)PDF導(dǎo)出功能,可以選擇多種庫(kù)和技術(shù)棧,本文為大家整理了四種常見(jiàn)的方法,感興趣的小伙伴可以參考一下2025-02-02
Kotlin與Java 泛型缺陷和應(yīng)用場(chǎng)景詳解
這篇文章主要為大家介紹了Kotlin與Java 泛型缺陷和應(yīng)用場(chǎng)景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
Java中使用Thread類和Runnable接口實(shí)現(xiàn)多線程的區(qū)別
這篇文章主要介紹了使用Thread類和Runnable接口實(shí)現(xiàn)多線程的區(qū)別,本文給大家介紹了兩種實(shí)現(xiàn)方式的步驟,除了以上兩種多線程實(shí)現(xiàn)方式,還可以使用 Callable 接口實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
SpringBoot使用ExceptionHandler做異常處理
這篇文章主要介紹了SpringBoot使用ExceptionHandler做異常處理,這篇文章通過(guò)多種方法案例來(lái)介紹該項(xiàng)技術(shù)的使用,需要的朋友可以參考下2021-06-06

