柚子快報邀請碼778899分享：Ajax從零到實戰(zhàn)
?????歡迎來到我的博客，很高興能夠在這里和您見面！希望您在這里可以感受到一份輕松愉快的氛圍，不僅可以獲得有趣的內(nèi)容和知識，也可以暢所欲言、分享您的想法和見解。
非常期待和您一起在這個小小的網(wǎng)絡(luò)世界里共同探索、學(xué)習(xí)和成長。??? ?? 歡迎訂閱本專欄 ?? ?
前言
本欄目是根據(jù)黑馬程序員的網(wǎng)課來整理的筆記，也會結(jié)合我的一些個人見解，來記錄自己學(xué)習(xí)Ajax的過程，俗話說，好記性不如爛筆頭，小鄭喜歡在學(xué)習(xí)的過程中記筆記，記下自己在學(xué)習(xí)過程中難以理解的知識點，反復(fù)練習(xí)，加深印象，小鄭打算在這個暑假的第一個月學(xué)習(xí)完Ajax從0到1實現(xiàn)項目，希望廣大網(wǎng)友一起監(jiān)督學(xué)習(xí)，互相進(jìn)步!
目錄
什么是 AJAX ?
引入 axios.js 文件到自己的網(wǎng)頁中
URL 查詢參數(shù)
1. 查詢參數(shù)的語法?
2. axios 如何攜帶查詢參數(shù)?
查詢地區(qū)列表案例
axios錯誤處理
請求報文--錯誤排查
form-serialize 插件
什么是 AJAX ?
使用瀏覽器的 XMLHttpRequest 對象 與服務(wù)器通信 瀏覽器網(wǎng)頁中，使用 AJAX技術(shù)（XHR對象）發(fā)起獲取省份列表數(shù)據(jù)的請求，服務(wù)器代碼響應(yīng)準(zhǔn)備好的省份列表數(shù)據(jù)給前端，前端拿到數(shù)據(jù)數(shù)組以后，展示到網(wǎng)頁
引入 axios.js 文件到自己的網(wǎng)頁中
axios.js文件鏈接:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
axios函數(shù)的使用語法
axios({
url: '目標(biāo)資源地址'
}).then((result) => {
// 對服務(wù)器返回的數(shù)據(jù)做后續(xù)處理
})
URL 查詢參數(shù)
1. 查詢參數(shù)的語法?
在 url 網(wǎng)址后面用?拼接格式：XXXX?參數(shù)名1=值1&參數(shù)名2=值2 參數(shù)名一般是后端規(guī)定的，值前端看情況傳遞即可
2. axios 如何攜帶查詢參數(shù)?
查詢城市列表的 url地址：http://hmajax.itheima.net/api/city
axios({
url: '目標(biāo)資源地址',
params: {
參數(shù)名: 值
}
}).then(result => {
// 對服務(wù)器返回的數(shù)據(jù)做后續(xù)處理
})
查詢地區(qū)列表案例
查詢地區(qū):?http://hmajax.itheima.net/api/area
/*
獲取地區(qū)列表: http://hmajax.itheima.net/api/area
查詢參數(shù):
pname: 省份或直轄市名字
cname: 城市名字
*/
// 目標(biāo): 根據(jù)省份和城市名字, 查詢地區(qū)列表
// 1. 查詢按鈕-點擊事件
document.querySelector('.sel-btn').addEventListener('click', () => {
// 2. 獲取省份和城市名字
let pname = document.querySelector('.province').value
let cname = document.querySelector('.city').value
// 3. 基于axios請求地區(qū)列表數(shù)據(jù)
axios({
url: 'http://hmajax.itheima.net/api/area',
params: {
pname,
cname
}
}).then(result => {
// console.log(result)
// 4. 把數(shù)據(jù)轉(zhuǎn)li標(biāo)簽插入到頁面上
let list = result.data.list
console.log(list)
let theLi = list.map(areaName => `
console.log(theLi)
document.querySelector('.list-group').innerHTML = theLi
})
})
axios錯誤處理
當(dāng)用戶已經(jīng)注冊過，再次點擊注冊按鈕的時候，就會報錯，那么我們要怎么處理呢?
請求報文--錯誤排查
當(dāng)我點擊登錄的時候，發(fā)現(xiàn)密碼錯誤，那么我們要怎么排查錯誤呢?
流程：
1.確認(rèn)信息是否在請求報文正確攜帶
2.發(fā)現(xiàn)密碼錯誤 返回到代碼查看
form-serialize 插件
? ? ?? 使用serialize函數(shù)，快速收集表單元素的值
? ? ? ?* 參數(shù)1：要獲取哪個表單的數(shù)據(jù)
? ? ? ?* ?表單元素設(shè)置name屬性，值會作為對象的屬性名
? ? ? ?* ?建議name屬性的值，最好和接口文檔參數(shù)名一致
? ? ? ?* 參數(shù)2：配置對象
? ? ? ?* ?hash 設(shè)置獲取數(shù)據(jù)結(jié)構(gòu)
? ? ? ?* ? ?- true：JS對象（推薦）一般請求體里提交給服務(wù)器
? ? ? ?* ? ?- false: 查詢字符串
? ? ? ?* ?empty 設(shè)置是否獲取空值
? ? ? ?* ? ?- true: 獲取空值（推薦）數(shù)據(jù)結(jié)構(gòu)和標(biāo)簽結(jié)構(gòu)一致
? ? ? ?* ? ?- false：不獲取空值
? ? ??
??????小鄭是普通學(xué)生水平，如有紕漏，歡迎各位大佬評論批評指正！???
???如果覺得這篇文對你有幫助的話，也請給個點贊、收藏下吧，非常感謝!? ? ?
柚子快報邀請碼778899分享：Ajax從零到實戰(zhàn)
文章鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Vevor工具坊
