?本系列可作為前端學習系列的筆記，代碼的運行環境是在VS code中，小編會將代碼復制下來，大家復制下來就可以練習了，方便大家學習。
HTML、CSS、JavaScript系列文章?已經收錄在前端專欄，有需要的寶寶們可以點擊前端專欄查看！
點贊關注不迷路！您的點贊、關注和收藏是對小編最大的支持和鼓勵！?
溫馨提示：全文內容較長，可先收藏再食用！文章可作為學習AJAX的筆記，框架和主要內容來源于B站UP主-黑馬程序員的視頻：黑馬程序員前端AJAX入門到實戰全套教程，包含學前端框架必會的（ajax+node.js+webpack+git），一套全覆蓋小編進行了整理并對一些內容進行了補充和注釋，非商用，如有侵權，必刪改！
系列文章目錄
簡述ajax、node.js、webpack、git
AJAX入門-AJAX 概念和 axios 使用
AJAX入門-URL、參數查詢、案例查詢
AJAX入門-常用請求方法和數據提交、HTTP協議-報文、接口文檔、案例實戰
目錄
系列文章目錄
一、什么是URL
二、URL組成
三、HTTP協議
四、域名
五、資源路徑
六、案例-獲取新聞列表
七、URL查詢參數
1.定義
2.axios－查詢參數
3.代碼演示
八、案例查詢-地區查詢
一、什么是URL
?
二、URL組成
?
三、HTTP協議
四、域名
五、資源路徑
六、案例-獲取新聞列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02.認識URL</title></head><body><!-- 新聞數據地址：https://hmajax.itheima.net/api/news --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url:'https://hmajax.itheima.net/api/news'}).then(result=>{console.log(result)})</script></body>
</html>
七、URL查詢參數
1.定義
瀏覽器提供給服務器的額外信息，讓服務器返回瀏覽器想要的數據
2.axios－查詢參數
語法：使用 axios 提供的 params 選項
注意：axios 在運行時把參數名和值，會拼接到 url?參數名=值
城市列表：http://hmajax.itheima.net/api/city?pname=河北省
3.代碼演示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03.URL查詢參數</title></head><body><!-- 城市列表：http://hmajax.itheima.net/api/city參數名：pname值：省份名字 --><p></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url:'https://hmajax.itheima.net/api/city',//查詢參數params: {pname: '福建省'}}).then(result=>{console.log(result.data.list)document.querySelector('p').innerHTML=result.data.list.join('<br>')})</script></body>
</html>運行結果：
八、案例查詢-地區查詢
需求：根據輸入的省份名字和城市名字，查詢地區并渲染列表
首先：確定 URL 網址和參數說明
? 查詢某個省內某個城市的所有地區: http://hmajax.itheima.net/api/area
? 參數名：
pname：省份名字或直轄市名字，比如北京、福建省、遼寧省...
cname：城市名字，比如北京市、廈門市、大連市...
完整：http://hmajax.itheima.net/api/area?pname=北京&cname=北京市
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例_地區查詢</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body><div class="container"><form id="editForm" class="row"><!-- 輸入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="請輸入省份名稱" /></div><!-- 輸入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="請輸入城市名稱" /></div></form><button type="button" class="btn btn-primary sel-btn">查詢</button><br><br><p>地區列表: </p><ul class="list-group"><!-- 示例地區 --><li class="list-group-item">東城區</li></ul></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*獲取地區列表: http://hmajax.itheima.net/api/area查詢參數:pname: 省份或直轄市名字cname: 城市名字*/// 目標: 根據省份和城市名字, 查詢地區列表// 1. 查詢按鈕-點擊事件document.querySelector('.sel-btn').addEventListener('click', () => {// 2. 獲取省份和城市名字let pname = document.querySelector('.province').valuelet cname = document.querySelector('.city').value// 3. 基于axios請求地區列表數據axios({url: 'http://hmajax.itheima.net/api/area',params: {pname,cname}}).then(result => {// console.log(result)// 4. 把數據轉li標簽插入到頁面上let list = result.data.listconsole.log(list)let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')console.log(theLi)document.querySelector('.list-group').innerHTML = theLi})})</script>
</body></html>
