目录
本案例展示了如何使用 Axios 发送带查询参数的 HTTP 请求，查询指定省份和城市下的地区列表。通过用户输入的省份名称和城市名称，向后端 API 发送请求，获取该地区下的具体区域信息，并将返回的数据动态渲染到网页上。
以下是完整的代码及详细分析，帮助您理解如何实现这个功能。
1. 项目背景与功能概述
- 功能目的：通过用户输入省份和城市的名称，查询该地区下的具体区/县名称。
- 实现方式：使用 Axios 库发送 HTTP 请求，结合 HTML 表单 和 JavaScript 动态更新页面内容，来展示查询结果。
2. 完整代码
<!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>04.案例_地区查询</title>
<!-- 引入 Bootstrap 样式 -->
<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>
<!-- 引入 Axios 库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 监听查询按钮的点击事件
document.querySelector('.sel-btn').addEventListener('click', () => {
// 获取用户输入的省份和城市名称
let pName = document.querySelector('.province').value
let cName = document.querySelector('.city').value
// 发送 Axios 请求，查询地区列表
axios({
url: 'http://hmajax.itheima.net/api/area', // API 地址
params: {
pname: pName, // 省份名称
cname: cName // 城市名称
}
}).then(result => {
// 获取返回的地区数据列表
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
}).catch(error => {
// 请求失败时输出错误信息
console.error('请求失败:', error);
})
})
</script>
</body>
</html>
3. HTML 结构解析
输入表单
<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>
- 页面中包含两个输入框，用于接收用户输入的省份和城市名称。
- 每个输入框通过
class属性指定了相应的类名province和city，便于 JavaScript 获取它们的值。
查询按钮
<button type="button" class="btn btn-primary sel-btn">查询</button>
- 当用户点击查询按钮时，系统会触发相应的事件，发起 API 请求。
地区列表
<ul class="list-group">
<li class="list-group-item">东城区</li>
</ul>
- 初始时，页面显示一个包含示例区域的列表“东城区”。查询成功后，返回的数据将替换这个列表内容。
4. JavaScript 部分解析
监听点击事件
document.querySelector('.sel-btn').addEventListener('click', () => {
let pName = document.querySelector('.province').value
let cName = document.querySelector('.city').value
// 省略请求部分
});
- 当用户点击查询按钮时，JavaScript 会读取输入框中的省份 (
pName) 和城市 (cName) 的值。
发送 Axios 请求
axios({
url: 'http://hmajax.itheima.net/api/area',
params: {
pname: pName,
cname: cName
}
})
- 使用 Axios 库发送 GET 请求，向后端 API 请求数据。请求时，我们将用户输入的省份和城市名称作为查询参数 (
pname,cname) 发送。
处理响应数据
.then(result => {
let list = result.data.list // 获取返回的地区数据列表
let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>` ).join('')
document.querySelector('.list-group').innerHTML = theLi
})
- 请求成功时，
then()方法会处理响应结果，获取返回的数据列表，并将每个区域名称生成一个<li>元素。 - 通过
.map()方法遍历列表，将每个区域名称渲染为一个<li>标签，使用join('')生成一个完整的 HTML 字符串。 - 然后，更新页面上的
<ul class="list-group">列表，显示查询结果。
5. 完整流程
- 用户在输入框中输入省份和城市名称，例如：“北京”和“北京市”。
- 用户点击查询按钮，页面通过 Axios 向后端 API 发起请求。
- 后端返回该城市下的区/县列表数据。
- 页面通过 JavaScript 动态渲染返回的地区列表，替换原本的示例数据，展示新的地区列表。
6. 总结
- Axios 是一个基于 Promise 的 HTTP 客户端，使用它可以轻松发送 GET 或 POST 请求获取数据。
- 本案例演示了如何通过传递查询参数（省份和城市名称）向 API 发送请求，并将返回的地区列表动态更新到网页中。
- 通过 JavaScript 和 DOM 操作，可以在前端实现交互式的数据展示，提升用户体验。
7. 适用场景
- 地址查询：适用于需要根据省份和城市查询地区、区县等信息的应用场景。
- 城市选择：适用于多级联动的城市选择功能，尤其在需要通过用户输入进行查询时。
- Web 开发学习：适合 Web 开发者学习如何与后端 API 交互、处理 API 请求并动态更新页面内容。
8. 优化和扩展
- 错误处理：可以增加更多的错误处理逻辑，例如显示友好的提示信息（如“请求失败”）。
- 输入验证：可以在发送请求前对输入进行验证，确保用户输入有效的省份和城市名称。
- 缓存机制：可以实现查询结果缓存，避免重复查询同一地区，提高性能。
- 分页支持：如果地区数据较多，可以考虑添加分页功能，以便用户查看所有地区。
这样，您就能够在自己的项目中实现一个动态的地区查询功能，提升用户体验，并加深对前端开发和 API 调用的理解。
标签：Axios,请求,list,列表,案例,查询,省份 From： https://blog.csdn.net/2402_84971234/article/details/145256991