文章目录
- 代码示例
- 效果
代码示例
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显示地区列表，动态生成地区项目HTMLlet 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文档结束 -->效果
ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ
ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ
