本系列可作为前端学习系列的笔记，代码的运行环境是在VS code中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML、CSS、JavaScript系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
**点赞关注不迷路！**您的点赞、关注和收藏是对小编最大的支持和鼓励！
温馨提示：全文内容较长，可先收藏再食用！文章可作为学习AJAX的笔记，框架和主要内容来源于B站UP主-黑马程序员的视频：黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖小编进行了整理并对一些内容进行了补充和注释，非商用，如有侵权，必删改！
系列文章目录
AJAX入门-常用请求方法和数据提交、HTTP协议-报文、接口文档、案例实战
目录
一、什么是URL
二、URL组成
三、HTTP协议
四、域名
五、资源路径
六、案例-获取新闻列表
html
<!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.代码演示
html
<!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=北京市
html
<!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').value
let 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.list
console.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>