一文讀懂JavaWeb前后端數(shù)據(jù)交互
一、HTTP是前后端數(shù)據(jù)交互的載體
Request的請求體中負(fù)載著前端向后端發(fā)送請求的數(shù)據(jù)；
Response的響應(yīng)體中負(fù)載著后端向前端返回響應(yīng)的數(shù)據(jù)；
當(dāng)然，Request的請求行中的URL中也可以負(fù)載著前端向后端發(fā)送請求的數(shù)據(jù)，這個后面會詳細(xì)說明。
1. HTTP Request
Request模型
Request實例
2. HTTP Response
Repsonse模型
Response實例
二、數(shù)據(jù)交互格式 JSON
1. JSON對象與JSON字符串
- JSON字符串就是符合JSON語法的字符串
- 每一種語言都有自己的JSON語法，所以每一種語言都有自己形式的JSON字符串和符合自己形式的JSON對象。
2. 不同語言中的JSON對象與JSON字符串互換
JavaScript
// json字符串轉(zhuǎn)json對象,調(diào)用parse方法：
//符合JSON語法的對象，所以是JSON字符串
var person='{"name":"zhangsan","sex":"男","age":"24"}';
var personObject = JSON.parse(person);
alert(personObject.name);//zhangsan
// json對象轉(zhuǎn)為json字符串，調(diào)用stringify方法：
//符合JSON語法的對象，所以是JSON對象
var person={"name":"zhangsan","sex":"男","age":"24"};
var personString = JSON.stringify(person);
alert(personString);
Java
// json對象轉(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對象
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表單中的有一個action屬性，向后端提交數(shù)據(jù)可以利用action，action后面接的就是后臺處理的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對象發(fā)送數(shù)據(jù)
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
<!--Json對象-->
var user = {
"username": "hahah",
"password": "123456"
};
$.ajax({
url:"/testJson",
type: "GET",
async: true,
data: user,//Json對象
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對象轉(zhuǎn)換為JSON字符串
dataType: 'json',
success: function (data) {
}
});
</script>
四、前端如何接收數(shù)據(jù)
寫Ajax代碼訪問后端接口
$.ajax({
url:'/heap', //這是后端接口的url
method:'get',
success:function (res) {
//res便是的數(shù)據(jù)便是后端拿到的數(shù)據(jù)
//這里需要注意：res為局部變量，
//所以需要在方法外定義一個變量把res賦值給他，才能在方法之外使用。
},
})
此時res就是JSON對象，這是因為：@ResponseBody注解主要是用來返回json數(shù)據(jù)給前端，如果你很懶，只想返回一個對象，那么加上@ResponseBody可以實現(xiàn)將返回的對象自動轉(zhuǎn)換為json傳返回給前端。
但是不是說json有兩種格式嘛…一個json對象，一個json字符串。你怎么證明你獲得的就是json對象而不是json字符串呢。在前端代碼中只需修改一處即可證明
如果是對象，那么就有屬性，我就來打印這個屬性，有數(shù)據(jù)就可以說明是json對象
五、后端如何請求數(shù)據(jù)
1. get 請求 和 post請求
- get請求不存在請求實體部分，鍵值對參數(shù)放置在 URL 尾部；
- get請求存在請求實體部分，鍵值對參數(shù)放置在 請求的請求體；
- get和post相比，要快，是因為get和post的請求過程不同，不多前三步都是一樣的，都是要先經(jīng)過和服務(wù)器的三次握手：
1.瀏覽器請求tcp連接（第一次握手）
2.服務(wù)器答應(yīng)進(jìn)行tcp連接（第二次握手）
3.瀏覽器確認(rèn)，并發(fā)送get請求頭和數(shù)據(jù)（第三次握手，這個報文比較小，所以http會在此時進(jìn)行第一次數(shù)據(jù)發(fā)送）
- get請求在第四步就會接收到了服務(wù)器返回的數(shù)據(jù)，而post請求在第四步是接收到服務(wù)器發(fā)送的100 continue指令，客戶端在發(fā)送數(shù)據(jù)請求服務(wù)端，服務(wù)端才會去返回數(shù)據(jù)，
- 就是說POST比GET多進(jìn)行了一次客戶端和服務(wù)器的打交道，GET請求產(chǎn)生了一個TCP數(shù)據(jù)包，而POST請求產(chǎn)生了兩個TCP數(shù)據(jù)包
2. @RequestParam
@RequestParam綁定參數(shù)機(jī)制
- 如果不寫@RequestParam(xxx)的話，那么會自動匹配方法參數(shù)，如果命名不同會默認(rèn)接收為空。
@RequestParam有三個配置參數(shù)：
- required 是否必須傳遞參數(shù)，默認(rèn)為 true，必須。
- defaultValue 可設(shè)置請求參數(shù)的默認(rèn)值。
- value 為接收url的參數(shù)名（相當(dāng)于key值）。
表單格式 +GET如果http請求是GET,則表單參數(shù)會以放入URL的查詢參數(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如果請求方法是POST，表單數(shù)據(jù)存在請求體中。可以在Controller方法參數(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 語句的 key 值要與后端實體類的屬性一一對應(yīng)。
@Controller
@RequestMapping(value = "saveUser", method=RequestMethod.POST )
@ResponseBody
public void saveUser(@RequestBody User user) {
userService.batchSave(user);
}
六、后端如何返回數(shù)據(jù)
@ResponseBody注解主要是用來返回json數(shù)據(jù)給前端，如果你很懶，只想返回一個對象，那么加上@ResponseBody可以實現(xiàn)將返回的對象自動轉(zhuǎn)換為json傳返回給前端。
到此這篇關(guān)于一文讀懂JavaWeb前后端數(shù)據(jù)交互的文章就介紹到這了,更多相關(guān)Java前后端數(shù)據(jù)交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用Spring底層組件實現(xiàn)Aware接口,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
springboot整合mybatis實現(xiàn)多表查詢的實戰(zhàn)記錄
SpringBoot對數(shù)據(jù)庫操作有多種方式,下面這篇文章主要給大家介紹了關(guān)于springboot整合mybatis實現(xiàn)多表查詢的相關(guān)資料,文中通過示例代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
Java設(shè)計模式中有很多種類別，例如單例模式、裝飾模式、觀察者模式等。本文將為大家詳細(xì)介紹其中的職責(zé)鏈模式，感興趣的可以了解一下2022-09-09
SpringCloud Feign配置應(yīng)用詳細(xì)介紹
這篇文章主要介紹了SpringCloud Feign配置應(yīng)用，feign是netflix提供的服務(wù)間基于http的rpc調(diào)用框架，在spring cloud得到廣泛應(yīng)用2022-09-09
JAVA中 終止線程的方法介紹，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了java判斷字符串是否為null的四種方式匯總,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
JAVA“無法驗證證書。將不執(zhí)行該應(yīng)用程序?！碧崾窘鉀Q辦法
這篇文章主要給大家介紹了關(guān)于JAVA“無法驗證證書,將不執(zhí)行該應(yīng)用程序”提示的解決辦法,要解決Java無法驗證證書的問題,可以嘗試下本文的方法,需要的朋友可以參考下2024-03-03
在Java中對List進(jìn)行分區(qū)的實現(xiàn)方法
在本文中,我們將說明如何將一個列表拆分為多個給定大小的子列表,也就是說在 Java 中如何對List進(jìn)行分區(qū),文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Java自定義數(shù)組列表的實現(xiàn)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
java中常見XML解析器的使用詳解(JAXP,DOM4J,Jsoup,JsoupXPath)
為了處理和操作XML數(shù)據(jù),我們需要使用XML解析器,本文將介紹幾種常用的XML解析器,包括JAXP、DOM4J、Jsoup和JsoupXPath,需要的小伙伴可以參考一下2023-11-11