黑马node.js教程（nodejs教程）——AJAX-Day01-04.案例_地区查询——查询某个省某个城市所有地区（代码示例）
文章目录
- 代码示例
- 效果
代码示例
axiosTest.html
<!DOCTYPE html> <!-- 文档类型声明，告诉浏览器这是一个HTML5文档 -->
<html lang="en"> <!-- HTML根元素，设置文档语言为英语 -->
<head> <!-- 头部区域，包含文档的元数据 -->
<meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8，支持多种语言字符 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 兼容模式设置，使用最新的IE浏览器渲染模式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口设置，使网页在移动设备上正确显示 -->
<title>地区查询</title> <!-- 网页标题，显示在浏览器标签页上 -->
<style>
/* CSS样式开始 */
.container {
/* 主容器样式 */
width: 400px;
/* 设置容器宽度为400像素 */
margin: 50px auto;
/* 设置上下外边距为50像素，左右自动居中 */
padding: 20px;
/* 设置内边距为20像素 */
border: 1px solid #ddd;
/* 设置1像素实线浅灰色边框 */
border-radius: 5px;
/* 设置边框圆角为5像素 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
/* 添加阴影效果 */
}
.form-group {
/* 表单组样式 */
margin-bottom: 15px;
/* 设置下外边距为15像素 */
}
label {
/* 标签样式 */
display: block;
/* 设置为块级元素，独占一行 */
margin-bottom: 5px;
/* 设置下外边距为5像素 */
font-weight: bold;
/* 设置文字为粗体 */
}
input {
/* 输入框样式 */
width: 100%;
/* 宽度占满父元素 */
padding: 8px;
/* 设置内边距为8像素 */
border: 1px solid #ddd;
/* 设置1像素实线浅灰色边框 */
border-radius: 3px;
/* 设置边框圆角为3像素 */
box-sizing: border-box;
/* 盒模型设置，使padding和border包含在width内 */
}
button {
/* 按钮样式 */
background-color: #4CAF50;
/* 设置背景色为绿色 */
color: white;
/* 设置文字颜色为白色 */
padding: 10px 15px;
/* 设置内边距，上下10像素，左右15像素 */
border: none;
/* 移除边框 */
border-radius: 4px;
/* 设置边框圆角为4像素 */
cursor: pointer;
/* 鼠标悬停时显示为手型光标 */
font-size: 16px;
/* 设置字体大小为16像素 */
}
button:hover {
/* 按钮悬停状态样式 */
background-color: #45a049;
/* 悬停时背景色变为深绿色 */
}
.result-list {
/* 结果列表容器样式 */
margin-top: 20px;
/* 设置上外边距为20像素 */
border-top: 1px solid #ddd;
/* 设置上边框为1像素实线浅灰色 */
padding-top: 15px;
/* 设置上内边距为15像素 */
}
.result-list h3 {
/* 结果列表标题样式 */
margin-top: 0;
/* 移除上外边距 */
}
.area-item {
/* 地区项目样式 */
margin-bottom: 5px;
/* 设置下外边距为5像素 */
padding: 5px;
/* 设置内边距为5像素 */
background-color: #f9f9f9;
/* 设置背景色为浅灰色 */
}
</style> <!-- CSS样式结束 -->
</head>
<body> <!-- 文档主体，包含页面的可见内容 -->
<div class="container"> <!-- 主容器，包含所有页面元素 -->
<h2>地区查询</h2> <!-- 主标题 -->
<div class="form-group"> <!-- 表单组，包含省份输入框和标签 -->
<label for="province">省份名称：</label> <!-- 省份输入框的标签 -->
<input type="text" id="province" placeholder="请输入省份名称，如：河北省"> <!-- 省份输入框，提供占位文本作为提示 -->
</div>
<div class="form-group"> <!-- 表单组，包含城市输入框和标签 -->
<label for="city">城市名称：</label> <!-- 城市输入框的标签 -->
<input type="text" id="city" placeholder="请输入城市名称，如：石家庄市"> <!-- 城市输入框，提供占位文本作为提示 -->
</div>
<button id="searchBtn">查询地区</button> <!-- 查询按钮 -->
<div class="result-list"> <!-- 结果列表容器 -->
<h3>地区列表</h3> <!-- 结果列表标题 -->
<div id="areaList"></div> <!-- 用于显示地区列表的容器，初始为空 -->
</div>
</div>
<!-- axios库地址，引入axios HTTP请求库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script> <!-- JavaScript代码开始 -->
// 获取DOM元素，通过ID选择器获取页面中的元素
const provinceInput = document.getElementById('province'); // 获取省份输入框元素
const cityInput = document.getElementById('city'); // 获取城市输入框元素
const searchBtn = document.getElementById('searchBtn'); // 获取查询按钮元素
const areaList = document.getElementById('areaList'); // 获取地区列表容器元素
// 添加点击事件，为查询按钮添加点击事件监听器
searchBtn.addEventListener('click', function () {
// 获取输入的省份和城市，使用trim()方法移除首尾空白字符
const pname = provinceInput.value.trim(); // 获取并处理省份输入值
const cname = cityInput.value.trim(); // 获取并处理城市输入值
// 验证输入，确保用户填写了省份和城市
if (!pname || !cname) { // 如果省份或城市为空
alert('请输入省份和城市名称'); // 弹出警告框提示用户
return; // 终止函数执行
}
// 显示加载状态，提示用户正在加载数据
areaList.innerHTML = '加载中...'; // 在地区列表容器中显示加载提示
// 发送请求获取地区列表，使用axios发送HTTP GET请求
axios({
url: 'http://hmajax.itheima.net/api/area', // API接口地址
params: { // 请求参数
pname: pname, // 设置省份参数
cname // 设置城市参数（注意当属性名和变量名相同时，可以简写）
}
}).then(response => { // 请求成功的回调函数
console.log(response); // 在控制台输出响应数据，便于调试
// 获取地区列表数据，从响应对象中提取地区列表
const list = response.data.list; // 获取API返回的地区列表数组
// 检查是否有数据，处理返回的地区列表
if (list && list.length > 0) { // 如果列表存在且不为空
// 构建HTML显示地区列表，动态生成地区项目HTML
let html = ''; // 初始化HTML字符串
list.forEach((area, index) => { // 遍历地区列表数组
html += `<div class="area-item">${index + 1}. ${area}</div>`; // 为每个地区创建带编号的HTML元素
});
areaList.innerHTML = html; // 将生成的HTML设置到地区列表容器中
} else { // 如果列表为空
areaList.innerHTML = '未找到相关地区数据'; // 显示无数据提示
}
}).catch(error => { // 请求失败的回调函数
console.error('获取地区数据失败:', error); // 在控制台输出错误信息
areaList.innerHTML = '获取数据失败，请检查输入的省份和城市名称是否正确'; // 显示错误提示
});
});
</script> <!-- JavaScript代码结束 -->
</body>
</html> <!-- HTML文档结束 -->
效果
ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ
ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ