黑马node.js教程(nodejs教程)——AJAX-Day01-04.案例_地区查询——查询某个省某个城市所有地区(代码示例)

发布于:2025-03-17 ⋅ 阅读:(15) ⋅ 点赞:(0)

文章目录

代码示例

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文档结束 -->

效果

在这里插入图片描述

ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍
ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ        ‌‍ᅟᅠ