AJAX
AJAX 概念
1.什么是 AJAX ? mdn
-
使用瀏覽器的
XMLHttpRequest對(duì)象 與服務(wù)器通信 -
瀏覽器網(wǎng)頁(yè)中，使用 AJAX技術(shù)（XHR對(duì)象）發(fā)起獲取省份列表數(shù)據(jù)的請(qǐng)求，服務(wù)器代碼響應(yīng)準(zhǔn)備好的省份列表數(shù)據(jù)給前端，前端拿到數(shù)據(jù)數(shù)組以后，展示到網(wǎng)頁(yè)
2.什么是服務(wù)器？
- 可以暫時(shí)理解為提供數(shù)據(jù)的一臺(tái)電腦
axios
使用
起步 | Axios Docs (axios-http.com)
1.引入 axios.js 文件到自己的網(wǎng)頁(yè)中
axios.js文件鏈接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js
2.使用
axios({
url: '目標(biāo)資源地址'
}).then((result) => {
// 對(duì)服務(wù)器返回的數(shù)據(jù)做后續(xù)處理
})
注意：請(qǐng)求的 url 地址, 就是標(biāo)記資源的網(wǎng)址
注意：then 方法，獲取成功時(shí)，服務(wù)器返回的數(shù)據(jù)
<!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.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script>
axios({
url: 'http://hmajax.itheima.net/api/province',
}).then(result => {
console.log(this);//window
console.log(result);
console.log(result.data);
console.log(result.data.list);
console.log(result.data.list.join('<br>'));
document.body.innerHTML = result.data.list.join('<br>');
})
</script>
</body>
</html>
拓展-URL
1.什么是 URL ？
-
統(tǒng)一資源定位符，簡(jiǎn)稱(chēng)網(wǎng)址，用于定位網(wǎng)絡(luò)中的資源（資源指的是：網(wǎng)頁(yè)，圖片，數(shù)據(jù)，視頻，音頻等等）
2.URL 的組成?
- 協(xié)議，域名，資源路徑（URL 組成有很多部分，先掌握這3個(gè)重要的部分即可）
- https://api.oioweb.cn/api/common/history
- 協(xié)議：https
- 域名：api.oioweb.cn
- 資源路徑：api/common/history
協(xié)議://域名/資源路徑
3.什么是 http 協(xié)議 ?
- 叫超文本傳輸協(xié)議，規(guī)定了瀏覽器和服務(wù)器傳遞數(shù)據(jù)的格式（而格式具體有哪些稍后我們就會(huì)學(xué)到）
4.什么是域名 ?
- 標(biāo)記服務(wù)器在互聯(lián)網(wǎng)當(dāng)中的方位，網(wǎng)絡(luò)中有很多服務(wù)器，你想訪問(wèn)哪一臺(tái)，就需要知道它的域名才可以
5.什么是資源路徑 ?
- 一個(gè)服務(wù)器內(nèi)有多個(gè)資源，用于標(biāo)識(shí)你要訪問(wèn)的資源具體的位置
axios({
url: 'https://api.oioweb.cn/api/common/history'
}).then(result => {
console.log(result)
})
攜帶參數(shù)
query參數(shù)
- 在 url 網(wǎng)址后面用?拼接格式：
http://xxxx.com/xxx/xxx?參數(shù)名1=值1&參數(shù)名2=值2 - 參數(shù)名一般是后端規(guī)定的，值前端傳遞。
axios 攜帶query查詢參數(shù)
-
使用 params
axios({ url: '目標(biāo)資源地址', params: { 參數(shù)名: 值 } }).then(result => { })
path參數(shù)
比如：https://api.oioweb.cn/api/weather/GetWeather
axios 攜帶path參數(shù)
let str = 'GetWeather'
axios({
url: `https://api.oioweb.cn/api/weather/${str}`,
}).then(result => {
})
body參數(shù)
axios 攜帶body參數(shù)
axios({
url: '目標(biāo)資源地址',
method:'post'
data:body參數(shù)
}).then(result => {
})
method請(qǐng)求方法
| 請(qǐng)求方法 | 操作 |
|---|---|
| GET | 獲取數(shù)據(jù) |
| POST | 數(shù)據(jù)提交 |
| PUT | 修改數(shù)據(jù)（全部） |
| DELETE | 刪除數(shù)據(jù) |
| PATCH | 修改數(shù)據(jù)（部分） |
注意：axios內(nèi)部設(shè)置了默認(rèn)請(qǐng)求方法就是GET
axios({
url: '目標(biāo)資源地址',
method: '請(qǐng)求方法',
data: {
參數(shù)名: 值
}
}).then(result => {
})
axios 的核心配置項(xiàng)
url：目標(biāo)資源地址，method：請(qǐng)求方法，params：查詢參數(shù)，data：提交的數(shù)據(jù)
catch
axios({
// ...請(qǐng)求選項(xiàng)
}).then(result => {
// 處理成功數(shù)據(jù)
}).catch(error => {
// 處理失敗錯(cuò)誤
})
HTTP 協(xié)議
請(qǐng)求報(bào)文
請(qǐng)求報(bào)文：是瀏覽器按照協(xié)議規(guī)定發(fā)送給服務(wù)器的內(nèi)容，例如剛剛注冊(cè)用戶時(shí)，發(fā)起的請(qǐng)求報(bào)文：
- 請(qǐng)求行：請(qǐng)求方法，URL，協(xié)議
- 請(qǐng)求頭：以鍵值對(duì)的格式攜帶的附加信息，比如：Content-Type（指定了本次傳遞的內(nèi)容類(lèi)型）
- 空行：分割請(qǐng)求頭，空行之后的是發(fā)送給服務(wù)器的資源
- 請(qǐng)求體：發(fā)送的資源
響應(yīng)報(bào)文
響應(yīng)報(bào)文：是服務(wù)器按照協(xié)議固定的格式，返回給瀏覽器的內(nèi)容
-
響應(yīng)行（狀態(tài)行）：協(xié)議，HTTP響應(yīng)狀態(tài)碼，狀態(tài)信息
-
響應(yīng)頭：以鍵值對(duì)的格式攜帶的附加信息，比如：Content-Type（告訴瀏覽器，本次返回的內(nèi)容類(lèi)型）
-
空行：分割響應(yīng)頭，控制之后的是服務(wù)器返回的資源
-
響應(yīng)體：返回的資源
HTTP 響應(yīng)狀態(tài)碼
- 用來(lái)表明請(qǐng)求是否成功完成
- 例如：404（客戶端要找的資源，在服務(wù)器上不存在）
| 狀態(tài)碼 | 說(shuō)明 |
|---|---|
| 1xx | 信息 |
| 2xx | 成功 |
| 3xx | 重定向消息 |
| 4xx | 客戶端錯(cuò)誤 |
| 5xx | 服務(wù)端錯(cuò)誤 |
form-serialize 插件
-
使用 form-serialize 插件提供的 serialize 函數(shù)就可以辦到
-
form-serialize 插件語(yǔ)法：
-
引入 form-serialize 插件到自己網(wǎng)頁(yè)中
-
使用 serialize 函數(shù)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-666132.html
- 參數(shù)1：要獲取的 form 表單標(biāo)簽對(duì)象（要求表單元素需要有 name 屬性-用來(lái)作為收集的數(shù)據(jù)中屬性名）
- 參數(shù)2：配置對(duì)象
- hash：
- true - 收集出來(lái)的是一個(gè) JS 對(duì)象結(jié)構(gòu)
- false - 收集出來(lái)的是一個(gè)查詢字符串格式
- empty：
- true - 收集空值
- false - 不收集空值
- hash：
-
form-serialize 插件在資源中下載文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-666132.html
到了這里，關(guān)于ajax-axios-url-form-serialize 插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
