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

效果

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34608.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ollama+OpenWebUI本地部署大模型

OllamaOpenWebUI本地部署大模型 前言Ollama使用Ollama安装Ollama修改配置Ollama 拉取远程大模型Ollama 构建本地大模型Ollama 运行本地模型&#xff1a;命令行交互Api调用Web 端调用 总结 前言 Ollama是一个开源项目&#xff0c;用于在本地计算机上运行大型语言模型&#xff0…

【NeurIPS 2024】LLM-ESR:用大语言模型破解序列推荐的长尾难题

标题期刊年份关键词LLM-ESR: Large Language Models Enhancement for Long-tailed Sequential RecommendationNeurIPS2024Large Language Models, Sequential Recommendation, Long-tailed &#x1f4da;研究背景 在电商和社交媒体的世界里&#xff0c;序列推荐系统&#xff…

C语言_数据结构总结9:树的基础知识介绍

1. 树的基本术语 - 祖先&#xff1a;考虑结点K&#xff0c;从根A到结点K的唯一路径上的所有其它结点&#xff0c;称为结点K的祖先。 - 子孙&#xff1a;结点B是结点K的祖先&#xff0c;结点K是B的子孙。结点B的子孙包括&#xff1a;E,F,K,L。 - 双亲&#xff1a;路径上…

Android 14 Telephony 网络选择功能介绍

一、总体介绍 (一)功能 手动搜网的流程:用户通过UI触发,调用TelephonyManager的API,比如startNetworkScan,然后这个请求会传递到RIL层,通过AT命令与基带通信,进行网络扫描。结果返回后,经过TelephonyRegistry通知应用层。中间可能涉及IPC,比如Binder通信,因为应用和…

系统思考全球化落地

感谢加密货币公司Bybit的再次邀请&#xff0c;为全球团队分享系统思考课程&#xff01;虽然大家来自不同国家&#xff0c;线上学习的形式依然让大家充满热情与互动&#xff0c;思维的碰撞不断激发新的灵感。 尽管时间存在挑战&#xff0c;但我看到大家的讨论异常积极&#xff…

位运算(基础算法)

按位与AND&#xff08; & &#xff09; 只有当两个位都为1时&#xff0c;结果才为1,否则为0。结果不会变大 按位或 OR&#xff08; | &#xff09; 只有当两个位中有一个为1时&#xff0c;结果才为1,否则为0。结果不会变小 按位异或 XOR &#xff08; ^ &#xff09; 只…

规模效应的三重边界:大白话解读-deepseek为例

前言&#xff1a;当Scaling Laws遇见边际递减效应 在人工智能的狂飙突进中&#xff0c;大语言模型如同不断膨胀的星体&#xff0c;吞噬着海量算力与数据。OpenAI于2020年揭开的Scaling Laws&#xff0c;曾为这场盛宴指明方向&#xff1a;模型性能随参数规模&#xff08;N&…

力扣143重排链表

143. 重排链表 给定一个单链表 L 的头节点 head &#xff0c;单链表 L 表示为&#xff1a; L0 → L1 → … → Ln - 1 → Ln 请将其重新排列后变为&#xff1a; L0 → Ln → L1 → Ln - 1 → L2 → Ln - 2 → … 不能只是单纯的改变节点内部的值&#xff0c;而是需要实际的…

wow-rag:task3-初步体验问答引擎

做RAG需要自己准备一个txt文档&#xff0c;新建一个docs文件夹&#xff0c;放进去。例如&#xff0c;这里放了一个./docs/问答手册.txt # 从指定文件读取&#xff0c;输入为List from llama_index.core import SimpleDirectoryReader,Document documents SimpleDirectoryRead…

bgp服务器是什么意思

一、基础概念 ‌BGP服务器‌&#xff08;Border Gateway Protocol Server&#xff09;指通过 ‌边界网关协议&#xff08;BGP&#xff09;‌ 实现 ‌多运营商线路智能调度‌ 的服务器&#xff0c;能够自动选择最优路径连接不同网络&#xff08;如电信、联通、移动&#xff09;…

AtCoder Beginner Contest 397(ABCDE)

目录 A - Thermometer 翻译&#xff1a; 思路&#xff1a; 实现&#xff1a; B - Ticket Gate Log 翻译&#xff1a; 思路&#xff1a; 实现&#xff1a; C - Variety Split Easy 翻译&#xff1a; 思路&#xff1a; 实现&#xff1a; D - Cubes 翻译&#xff1a…

unserialize3 [有难度,序列化反序列化知识点]

详情: 地址:https://adworld.xctf.org.cn/challenges/list (unserialize3) 看到题目名称是反序列化 代码审计 <?php class xctf{// 定义一个公有属性$flag&#xff0c;通常CTF题目中需要获取该属性值public $flag 111; // 此处为示例值&#xff0c;实际可能为真实flag/*…

【Linux-传输层协议TCP】TCP协议段格式+确认应答+超时重传+连接管理机制(三次握手、四次挥手、理解TIME_WAIT + CLOSE_WAIT)

TCP协议 TCP全称为“传输控制协议&#xff08;Transmission Control Protocol&#xff09;”人如其名&#xff0c;要对数据的传输进行一个详细的控制。 1.TCP协议段格式 下面是TCP报头各个字段的表格形式&#xff1a; 字段名称字段大小描述源端口16位发送端TCP端口号。目的端…

《AI大模型趣味实战》No2 : 快速搭建一个漂亮的AI家庭网站-相册/时间线/日历/多用户/个性化配色(中)

快速搭建一个漂亮的AI家庭网站-相册/时间线/日历/多用户/个性化配色(中) 摘要 在上一篇文章中&#xff0c;我们介绍了如何搭建一个基础的家庭网站&#xff08;V1.0版本&#xff09;&#xff0c;包含了用户管理、相册管理、时间线和日历等功能。本文将继续深入&#xff0c;详细…

React(二):JSX语法解析+综合案例

事件绑定 this绑定方式 问题&#xff1a;在事件执行后&#xff0c;需获取当前类的对象中相关属性&#xff0c;此时需要this——当打印时&#xff0c;发现this为undefined,这又是为啥&#xff1f; 假设有一个btnClick函数&#xff0c;但它并不是我们主动调用的&#xff0c;而是…

One of the configured repositories failed (未知), and yum doesn‘t have enough cached data to continue

centos操作系统运行yum命令是出现如下报错&#xff1a; 解决办法&#xff1a; 由于CentOS的源地址内容已移除&#xff0c;CentOS 操作系统结束了生命周期&#xff0c;源地址内容已移除。 只需要将它的base源换成其他可用源&#xff0c;我这里将它换成了阿里的base源 备份原来…

【蓝图使用】绘制mesh顶点的法线

文章目录 绘制法线Normal准备工作UE5资源制作蓝图制作 参考 绘制法线Normal 参考[1]打算用蓝图走一遍渲染管线&#xff0c;还是可以的 准备工作 Blender制作一个三个顶点的模型 要不要材质无所谓&#xff0c;就一个三个顶点的mesh即可&#xff0c;参考[2] 找到一个法线贴…

202503执行jmeter压测数据库(ScyllaDB,redis,lindorm,Mysql)

一、Mysql 1 、 准备MySQL 连接内容 2 、 下载连接jar包 准备 mysql-connector-java-5.1.49.jar 放到 D:\apache-jmeter-5.6.3\lib\ext 目录下面; 3 、 启动jmeter ,配置脚本 添加线程组---》JDBC Connection Configuration---》JDBC Request---》查看结果树。 1)测…

f-string高级字符串格式化与string Template()

f-string 高级字符串格式化 f-string无法替换带有${name}的字符串&#xff0c;会保留\$ def test_fstring():"""f-string&#xff0c;高级字符串格式化的方式"""s "my name is {name}".format(name李白)print(s)# 无法替换$s &quo…

【Java 优选算法】分治-归并排序

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 数组分块如二叉树的前序遍历, 而归并排序就如二叉树的后序遍历 912. 排序数组 解法 使用归并算法 根据中间点划分区间, mid (right left ) / 2将左右区间排序合并两个有…