黑马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显示地区列表，动态生成地区项目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文档结束 -->效果
ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ
ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ ᅟᅠ
相关文章：
黑马node.js教程（nodejs教程）——AJAX-Day01-04.案例_地区查询——查询某个省某个城市所有地区（代码示例）
文章目录 代码示例效果 代码示例 axiosTest.html <!DOCTYPE html> <!-- 文档类型声明，告诉浏览器这是一个HTML5文档 --> <html lang"en"> <!-- HTML根元素，设置文档语言为英语 --><head> <!-- 头部区域&am…...
vue 自制列表，循环滚动
需求人员表示，超过高度的表格内容需要滚动展示，所以效果图如下： 自定义列表样式，主要是通过flex布局，控制 类th 与 类td 的宽度保持一致，标签结构还是参考了table的结构，由thead与tbody包裹tr再…...
【QA】模板方法模式在Qt中有哪些应用？
在 Qt 框架中，模板方法模式（Template Method Pattern）被广泛应用于框架的设计中，通过定义算法骨架并允许子类在不改变结构的情况下重写部分步骤。以下是 Qt 中典型的应用场景及示例： 1. 事件处理（Event Ha…...
图论——kruskal算法
53. 寻宝（第七期模拟笔试） 题目描述 在世界的某个区域，有一些分散的神秘岛屿，每个岛屿上都有一种珍稀的资源或者宝藏。国王打算在这些岛屿上建公路，方便运输。 不同岛屿之间，路途距离不同，国王希望你可以规划建公路的方案，如何可以以最短的总公路距离将 所有岛屿联通…...
Windows主机、虚拟机Ubuntu、开发板，三者之间文件互传
以下内容源于日常学习的整理，欢迎交流。 下图是Windows主机、虚拟机Ubuntu、开发者三者之间文件互传的方式示意图： 注意，下面谈及的所有方式，都要求两者的IP地址处于同一网段，涉及到的软件资源见felm。 一、Windows主…...
Flutter Dart 泛型详解
引言 在 Flutter 开发中，Dart 语言的泛型是一项强大且实用的特性。泛型允许我们在定义类、方法或接口时使用类型参数，这样可以编写更加灵活、可复用且类型安全的代码。下面将详细介绍 Dart 泛型的各个方面，并结合代码示例进行说明。 1. 泛型…...
Windows Docker 报错： has no HTTPS proxy，换源
pull python 3.7报错： 尝试拉取Docker 测试库hello world也失败 尝试使用临时镜像源，可以成功拉取： sudo docker pull docker.m.daocloud.io/hello-world说明确实是网络问题，需要配置镜像源，为了方便，在d…...
Java：Arrays类：操作数组的工具类
文章目录 Arrays类常见方法SetAll(); 代码排序如果数组中存储的是自定义对象 Arrays类 常见方法 SetAll(); 注意： 不能用新的数组接是因为修改的是原数组，所以完了要输出原数组发现会产生变化参数是数组下标变成灰色是因为还能简化（Lambda…...
【面试场景题-Redis中String类型和map类型的区别】
今天在面试中碰到一个场景题：在 Redis 中存储 100 万用户数据时，使用 String 类型和 Hash（Map）类型的主要区别是什么？体现在以下几个方面： 1. 存储结构与内存占用 String 类型 存储方式：每个用…...
List附加对象
List里面的某个对象需要修改，赋值 可以使用ALL或者ForEach，All的话，不能直接使用赋值对象只能赋值对象的某个字段 static void Main(string[] args){List<UserData> UserDatas new List<UserData>{new UserData { Id 1, Name …...
VLLM专题（三十六）—自动前缀缓存
PagedAttention 的核心思想是将每个请求的 KV 缓存划分为 KV 块。每个块包含固定数量的标记（tokens）对应的注意力键（keys）和值（values）。PagedAttention 算法允许将这些块存储在非连续的物理内存中，从而通过按需分配内存来消除内存碎片。 为了自动缓存 KV 缓存，我们利…...
相机光学（四十七）——相纸材质
1. 光面相纸 光面相纸表面光滑，亮度高，反光性好，能够呈现出清晰、鲜艳的图像效果，适合用于表现色彩艳丽、反差要求较高的题材，如产品照、艺术照和风景照。然而，这种相纸容易沾上指纹和灰尘。 2. 绒面相纸…...
数据表100多字段如何写mapper文件的xml
编写一个包含100多个字段的插入语句通常涉及到使用<mapper>标签来定义映射规则，特别是在使用MyBatis这样的持久层框架时。 1. 定义<mapper>命名空间 order表 <mapper namespace"com.example.mapper.orderMapper"><!-- 插入语句 --…...
只是“更轻更薄”？不！遨游三防平板还选择“更强更韧”
当消费电子领域普遍追求“更轻更薄”的设计美学时，遨游三防平板不止于此，还选择了另一条道路——“更强更韧”。在智能制造的复杂场景中，三防平板需直面高温、油污、撞击与极端气候的考验。普通消费级平板因防护性能不足，常因环境…...
拉取镜像太慢？一文解决！
# 拉取 Docker 镜像太慢？一文解决！🚀在国内使用 Docker 拉取镜像时，可能会遇到速度慢甚至失败的情况。别担心！本文带你快速优化 Docker 拉取方法！🔥01 | 确保 Docker Hub 登录认证 🔐…...
基于RAGFlow本地部署DeepSeek-R1大模型与知识库：从配置到应用的全流程解析
作者：后端小肥肠 🍊 有疑问可私信或评论区联系我。 🥑 创作不易未经允许严禁转载。 姊妹篇： DeepSpeek服务器繁忙？这几种替代方案帮你流畅使用！（附本地部署教程）-CSDN博客 10分钟上手…...
（分块）洛谷 P2801 教主的魔法 题解
之前学过 莫队 算法，其运用了分块思想；但是我居然是第一次写纯种的分块题目。 题意 给你一个长度为 n n n 的序列 a a a（一开始 ∀ a i ∈ [ 1 , 1000 ] \forall a_i\in[1,1000] ∀ai∈[1,1000]）。要求执行 q q q 次操作&…...
[蓝桥杯 2023 省 B] 飞机降落（不会dfs的看过来）
[蓝桥杯 2023 省 B] 飞机降落 题目描述 N N N 架飞机准备降落到某个只有一条跑道的机场。其中第 i i i 架飞机在 T i T_{i} Ti 时刻到达机场上空，到达时它的剩余油料还可以继续盘旋 D i D_{i} Di 个单位时间，即它最早可以于 T i T_{i} Ti 时刻…...
信创系统极速文件查找：locate 命令详解
原文链接：信创系统极速文件查找：locate 命令详解 Hello，大家好啊！今天给大家带来一篇信创终端操作系统上 locate 命令详解的文章。在 Linux 及信创终端操作系统（如 统信 UOS、麒麟 KOS）中，查找…...
C# | 超简单CSV表格读写操作（轻松将数据保存到CSV，并支持读取还原）
C# | 超简单CSV表格读写操作（轻松将数据保存到CSV，并支持读取还原） 文章目录 C# | 超简单CSV表格读写操作（轻松将数据保存到CSV，并支持读取还原）一、上位机开发中的CSV应用背景二、CSV读写实战教学1. 基本对…...
PostgreSQL：语言基础与数据库操作
🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...
RK3568 Android11 sh366006驱动
sh366006.c /* 谁愿压抑心中怒愤冲动咒骂这虚与伪与假从没信要屈膝面对生命纵没有别人帮一生只靠我双手让我放声疯狂叫囔今天的他 呼风可改雨不可一世太嚣张 --《不可一世》Beyond */ #include <linux/module.h> #include <linux/init.h> #include <linux/fs.h…...
蓝桥杯学习——二叉树+奇点杯题目解析
基础认知 一、二叉树种类： 1.满二叉树。记深度k，节点数量2^k-1。 2.完全二叉树：除了底层，其余全满，底部从左到右连续。 3，平衡二叉搜索树：左子树和右子树高度差不大于1。 二、存储方式&…...
基于django+vue的购物商城系统
开发语言：Python框架：djangoPython版本：python3.8数据库：mysql 5.7数据库工具：Navicat11开发软件：PyCharm 系统展示 系统首页 热卖商品 优惠资讯 个人中心 后台登录 管理员功能界面 用户管理 商品分类管理…...
AI安全、大模型安全研究（DeepSeek）
DeepSeek 点燃AI应用革命之火，但安全 “灰犀牛” 正在逼近 DeepSeek-R1国产大模型的发布，以技术创新惊艳了全球，更是极致的性价比推动国内千行百业接入 AI，政府、企业竞速开发智能业务处理、智能客服、代码生成、营销文案等应用，“落地效率” 成为第一关键词。然而与此相…...
卷积神经网络 - 汇聚层
卷积神经网络一般由卷积层、汇聚层和全连接层构成，本文我们来学习汇聚层。 汇聚层(Pooling Layer)也叫子采样层(Subsampling Layer)，其作用是进 行特征选择，降低特征数量，从而减少参数数量。 卷积层虽然可以显著减少网络中连接的…...
蓝桥杯备赛-贪心-管道
问题描述 有一根长度为 lenlen 的横向的管道，该管道按照单位长度分为 lenlen 段，每一段的中央有一个可开关的阀门和一个检测水流的传感器。 一开始管道是空的，位于 LiLi 的阀门会在 SiSi 时刻打开，并不断让水流入管道。 对…...
论文分享：PL-ALF框架实现无人机低纹理环境自主飞行
在室内仓库、地下隧道等低纹理复杂场景中，无人机依赖视觉传感器进行自主飞行时，往往会遇到定位精度低、路径规划不稳定等难题。针对这一问题，重庆邮电大学计算机学院雷大江教授团队在IEEE Trans期刊上提出了一种新型自主飞行框架：…...
Nodejs使用redis
框架：koa，通过koa-generator创建 redis: 本地搭建，使用默认帐号，安装说明地址以及默认启动设置：https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/ 中间件&#x…...
GitHub 超火的开源终端工具——Warp
Warp 作为近年来 GitHub 上备受瞩目的开源终端工具，以其智能化、高性能和协作能力重新定义了命令行操作体验。以下从多个维度深入解析其核心特性、技术架构、用户评价及生态影响力： 一、背景与核心团队 Warp 由前 GitHub CTO Jason Warner 和 Google 前…...