欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文讀懂JavaWeb前后端數(shù)據(jù)交互

 更新時(shí)間:2024年01月30日 10:33:44   作者:后端漫漫  
本文主要介紹了一文讀懂JavaWeb前后端數(shù)據(jù)交互,包括HTTP請(qǐng)求與響應(yīng)、JSON數(shù)據(jù)格式以及常用的數(shù)據(jù)傳輸技術(shù),具有一定的參考價(jià)值,感興趣的可以了解一下

一、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ù)

寫(xiě)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ī)制
- 如果不寫(xiě)@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í)體類(lèi)的屬性一一對(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)文章

最新評(píng)論