一文讀懂JavaWeb前后端數(shù)據(jù)交互
一、HTTP是前后端數(shù)據(jù)交互的載體
Request的請求體中負載著前端向后端發(fā)送請求的數(shù)據(jù)；
Response的響應體中負載著后端向前端返回響應的數(shù)據(jù)；
當然，Request的請求行中的URL中也可以負載著前端向后端發(fā)送請求的數(shù)據(jù)，這個后面會詳細說明。
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表單進行傳遞：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)過和服務器的三次握手：
1.瀏覽器請求tcp連接（第一次握手）
2.服務器答應進行tcp連接（第二次握手）
3.瀏覽器確認，并發(fā)送get請求頭和數(shù)據(jù)（第三次握手，這個報文比較小，所以http會在此時進行第一次數(shù)據(jù)發(fā)送）
- get請求在第四步就會接收到了服務器返回的數(shù)據(jù)，而post請求在第四步是接收到服務器發(fā)送的100 continue指令，客戶端在發(fā)送數(shù)據(jù)請求服務端，服務端才會去返回數(shù)據(jù)，
- 就是說POST比GET多進行了一次客戶端和服務器的打交道，GET請求產(chǎn)生了一個TCP數(shù)據(jù)包，而POST請求產(chǎn)生了兩個TCP數(shù)據(jù)包
2. @RequestParam
@RequestParam綁定參數(shù)機制
- 如果不寫@RequestParam(xxx)的話，那么會自動匹配方法參數(shù)，如果命名不同會默認接收為空。
@RequestParam有三個配置參數(shù)：
- required 是否必須傳遞參數(shù)，默認為 true，必須。
- defaultValue 可設置請求參數(shù)的默認值。
- value 為接收url的參數(shù)名（相當于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ù)存在請求體中?？梢栽贑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 語句的 key 值要與后端實體類的屬性一一對應。
@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傳返回給前端。
到此這篇關于一文讀懂JavaWeb前后端數(shù)據(jù)交互的文章就介紹到這了,更多相關Java前后端數(shù)據(jù)交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
反射就是把Java類中的各個成分映射成一個個的Java對象。本文將通過示例詳細講解Java中的反射機制，感興趣的小伙伴可以跟隨小編學習一下2022-03-03
這篇文章主要介紹了Java編程多線程之共享數(shù)據(jù)代碼詳解，分享了相關代碼示例，小編覺得還是挺不錯的，具有一定借鑒價值，需要的朋友可以參考下2018-02-02
Fastjson是一個Java語言編寫的高性能功能完善的JSON庫。接下來通過本文給大家分享Fastjson 常用API介紹及下載地址，感興趣的朋友一起看看吧2017-11-11
這篇文章主要介紹了Java中的ConcurrentHashMap集合源碼解析,ConcurrentHashMap底層容器和HashMap相同,同樣是Node數(shù)組+鏈表+紅黑樹,不同的是在原來的基礎之上使用了Synchronized+CAS來保證線程安全,下面我們來進行源碼分析,需要的朋友可以參考下2023-11-11
在本篇文章中我們給大家分享了關于java對象中淺克隆和深克隆的相關知識點和相關代碼內(nèi)容，有興趣的朋友們學習下。2018-10-10
SpringBoot導出PDF的四種實現(xiàn)方法詳解
在Spring?Boot應用程序中實現(xiàn)PDF導出功能,可以選擇多種庫和技術(shù)棧,本文為大家整理了四種常見的方法,感興趣的小伙伴可以參考一下2025-02-02
這篇文章主要為大家介紹了Kotlin與Java 泛型缺陷和應用場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Java中使用Thread類和Runnable接口實現(xiàn)多線程的區(qū)別
這篇文章主要介紹了使用Thread類和Runnable接口實現(xiàn)多線程的區(qū)別,本文給大家介紹了兩種實現(xiàn)方式的步驟，除了以上兩種多線程實現(xiàn)方式，還可以使用 Callable 接口實現(xiàn)，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-07-07
SpringBoot使用ExceptionHandler做異常處理
這篇文章主要介紹了SpringBoot使用ExceptionHandler做異常處理,這篇文章通過多種方法案例來介紹該項技術(shù)的使用,需要的朋友可以參考下2021-06-06
這篇文章主要為大家介紹了如何利用Java語言編寫一個電腦屏幕截圖工具，文中的示例代碼講解詳細，對我們學習有一定的幫助，需要的可以參考一下2022-05-05