AJAX-day1：

注：文件布局：

一、AJAX的概念：

AJAX是瀏覽器與服務器進行數據通信的技術 =>把數據變活

二、AJAX的使用：

使用axios庫，與服務器進行數據通信
1. 基于XMLHttpRequest封裝，代碼簡單
2. Vue,React項目使用
學習XMLHttpRequest對象，了解AJAX底層原理

1.axios庫的初步使用：

引入JS：https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js 或 https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js
1. ```
<script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
```

使用axios函數：axios全攻略 | 羸弱的小金魚 (ykloveyxk.github.io)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js"></script><script>axios({url:'目標資源地址'}).then((result)=>{//對服務器返回的數據做后續處理})</script>
</body>
</html>

目標資源：http://hmajax.itheima.net/api/province：省份列表數據

2.使用URL進行參數查詢：

URL后加 ?pname=河北省

語法：http://xxx.com/xxx/xxx?參數名1=值1&參數名2=值2

axios({url: 'http://hmajax.itheima.net/api/area',params: {pname: `${query1.value}`,// 參數1cname: `${query2.value}` // 參數2}}).then((result) => {console.log(result.data.list);ul.innerHTML = result.data.list.map((x) => `<li>${x}</li>`).join('')console.log(result.data.list.map((x) => `<li>${x}</li>`));})

3.常用的請求方法與數據提交：

概念：對服務器資源要執行的操作

請求方法	操作
GET(get)	獲取數據
POST(post)	提交數據
PUT(put)	修改數據（全部）
DELETE(delete)	刪除數據
PATCH(patch)	修改數據（部分）

axios的請求配置：

url ：請求的URL網址

method ：請求的方法，GET可以省略（不區分大小寫）

params：查詢參數

data：提交的數據

//獲取數據
axios({url: '目標資源地址',//method: 'get',params:{參數名:值}}).then((result) => {//對返回的數據的處理})

//提交數據 ? ? ? ?
axios({url: '目標資源地址',method: 'post',data: {參數名: 值}}).then((result) => {//對返回的數據的處理})

4.axios的錯誤處理：

服務器返回的信息：Uncaught大對象里的data

語法格式：

 axios({//請求項}).then(result=>{//處理數據}).catch(error=>{//處理錯誤})

三、HTTP協議：

1.請求報文：

HTTP協議：規定了瀏覽器發送及服務器返回內容的格式

請求報文：瀏覽器按照HTTP協議要求的格式，發送給服務器的內容

請求報文樣例：

組成部分：

請求行：請求方法，URL，協議
請求頭：以鍵值對格式攜帶的附加信息，例如：Content-Type（本次瀏覽器攜帶的內容類型）
空行：分割請求頭和內容數據，空行后是內容數據（發給服務器的資源）
請求體：發送的資源

查看請求報文：

2.用請求報文排查錯誤：

傳不了圖片（都是臨時的，清理掉了），大家看這篇：&3 在瀏覽器中查看請求報文和響應報文_f12看請求和響應怎么看-CSDN博客

查看提交的信息，判斷錯誤位置

3.響應報文：

HTTP協議：規定了瀏覽器發送及服務器返回內容的格式

響應報文：服務器按照HTTP協議要求的格式，發送給瀏覽器的內容

響應行（狀態行）：協議，HTTP響應狀態碼（400表示響應失敗）、狀態信息
響應頭：以鍵值對的格式攜帶的附加信息，如：Conttent-Type
空行：分割響應頭
響應體：返回的資源

查看響應報文：

HTTP狀態碼：用來表明，請求是否成功

狀態碼	說明
1xx	信息
2xx	成功
3xx	重新定向消息
4xx	客戶端錯誤
5xx	服務端錯誤

常見狀態碼：

200：成功

404：服務器找不到資源

四、接口文檔：

接口文檔：描述接口的文章

接口：使用AJAX和服務器通訊是使用的URL，請求方法，及參數

AJAXS接口：歡迎使用 - AJAX階段 (apifox.com)

五、from-serialize插件的使用：

作用：快速地搜集表單元素的值

引入插件：form-serialize.js插件下載&引用-CSDN博客

<!DOCTYPE html>
<html lang="en">
?
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
</head>
?
<body><form action="javascript" class="example"><input type="text" name="un"><input type="password" name="pw"><!-- <input type="button" class="btn" value="提交"> --></form><button class="btn">提交</button><script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script><script src="../from-serialize/from-serialize.js"></script><script>const input = document.querySelector('.example')const btn = document.querySelector('.btn')btn.addEventListener('click', () => {let data = serialize(input, { hash: true, empty: true })console.log(data);})</script>
</body>
?
</html>

必須使用：

<form action="javascript" class="example"><input type="text" name="un"><input type="password" name="pw"><!-- <input type="button" class="btn" value="提交"> --></form>

的格式

form用來確定區間

name是鍵名

value是值

其中：hash 設置獲取的數據結構：

true：獲取得到JS對象
false：獲取得到查詢字符串

empty 設置是否獲取空值：

true：允許獲取空值
false：bu獲取空值

六、案例-整合登入：

代碼：

<!DOCTYPE html>
<html lang="en">
?
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../bootstrap-5.3.0-alpha1-dist/css/bootstrap.rtl.min.css"><style>.banner {width: 700px;height: 700px;margin: 20px auto;}
?.row {margin-bottom: 15px;}
?.alert {transition: all .5s;}
?.unshow {opacity: 0;}</style>
</head>
?
<body><div class="banner"><h1>歡迎-登入</h1><div class="alert unshow" role="alert"></div><form class="login-form"><div class="row g-3 align-items-center"><div class="col-auto"><label for="username" class="col-form-label">用戶名：</label></div><div class="col-auto"><input type="text" id="username" name="username" class="form-control"aria-describedby="passwordHelpInline"></div></div><div class="row g-3 align-items-center"><div class="col-auto"><label for="password" class="col-form-label">密碼：</label></div><div class="col-auto"><input type="password" id="password" name="password" class="form-control"aria-describedby="passwordHelpInline"></div><div class="col-auto"><span id="passwordHelpInline" class="form-text">Must be 6-20 characters long.</span></div></div></form><button class="btn btn-primary">登入</button></div><script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script><script src="../from-serialize/from-serialize.js"></script><script>// const un = document.querySelector('#username')// const pw = document.querySelector('#password')const input = document.querySelector('.login-form')const btn = document.querySelector('button')const alt = document.querySelector('.alert')
?function alertFn(msg, isSuccess) {alt.classList.remove('unshow')let bgStyle = isSuccess ? 'alert-success' : 'alert-danger'alt.classList.add(bgStyle)alt.innerText = msg// alert('用戶名或密碼錯誤')
?setTimeout(function () {alt.classList.add('unshow')alt.classList.remove(bgStyle)}, 2000)}
?
?btn.addEventListener('click', () => {let data = serialize(input, { hash: true, empty: true })console.log(data);if (data.username.length < 8) {alertFn('用戶名長度不能少于8位', 0)
?return //阻止代碼繼續執行}else if (data.password.length < 6) {alertFn('密碼長度不能少于6位', 0)
?return //阻止代碼繼續執行}axios({url: 'https://hmajax.itheima.net/api/login',method: 'post',data: {username: data.username,password: data.password}}).then(result => {console.log(result);
?alertFn(result.data.message, 1)
?}).catch(error => {console.log(error);
?alertFn(error.response.data.message, 0)})})</script>
</body>
?
</html>

效果：

1.初始界面：

2.直接登入時或用戶名長度少于8位時（直接點提交）：

3.無密碼時或密碼少于6位時（用戶名為 :? itheima007）：

4.登入失敗時：

5.成功登入（用戶名：itheima007? ?密碼：7654321）：

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/40283.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/40283.shtml
英文地址，請注明出處：http://en.pswp.cn/web/40283.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！