jQuery ajax读取本地json文件 三级联动下拉框

image.png

步骤 1：创建本地JSON文件
{"departments": [{"name": "会计学院","code": "052"},{"name": "金融学院","code": "053"},{"name": "财税学院","code": "063"}],"classes": [{"departmentCode": "052","className": "会计一班","classCode": "1001"},{"departmentCode": "052","className": "会计一班","classCode": "1002"},{"departmentCode": "052","className": "会计一班","classCode": "1003"},{"departmentCode": "053","className": "金融一班","classCode": "2001"},{"departmentCode": "053","className": "金融二班","classCode": "2002"},{"departmentCode": "063","className": "财税一班","classCode": "3001"},{"departmentCode": "063","className": "财税二班","classCode": "3002"}],"nations": [{"id": "01","text": "汉族","value": "Han"},{"id": "02","text": "壮族","value": "Zhuang"},{"id": "03","text": "回族","value": "Hui"},{"id": "04","text": "藏族","value": "Tibetan"},{"id": "05","text": "维吾尔族","value": "Uighur "},{"id": "06","text": "苗族","value": "Miao"},{"id": "07","text": "彝族","value": "Yi"},{"id": "08","text": "蒙古族","value": "Mongol"},{"id": "09","text": "布依族","value": "Buyi"},{"id": "10","text": "朝鲜族","value": "Korean"},{"id": "11","text": "满族","value": "Manchu"},{"id": "12","text": "侗族","value": "Dong"},{"id": "13","text": "瑶族","value": "Yao"},{"id": "14","text": "白族","value": "Bai"},{"id": "15","text": "土家族","value": "Tujia"},{"id": "16","text": "哈尼族","value": "Hani"},{"id": "17","text": "哈萨克族","value": "Kazakh"},{"id": "18","text": "傣族","value": "Dai"},{"id": "19","text": "黎族","value": "Li"},{"id": "20","text": "傈僳族","value": "Lisu"},{"id": "21","text": "佤族","value": "Wa"},{"id": "22","text": "畲族","value": "She"},{"id": "23","text": "高山族","value": "Gaoshan"},{"id": "24","text": "拉祜族","value": "Lahu"},{"id": "25","text": "水族","value": "Shui"},{"id": "26","text": "东乡族","value": "Dongxiang"},{"id": "27","text": "纳西族","value": "Naxi"},{"id": "28","text": "景颇族","value": "Jingpo"},{"id": "29","text": "柯尔克孜族","value": "Kirghiz"},{"id": "30","text": "土族","value": "Tu"},{"id": "31","text": "达斡尔族","value": "Daur"},{"id": "32","text": "仫佬族","value": "Mulam"},{"id": "33","text": "羌族","value": "Qiang"},{"id": "34","text": "布朗族","value": "Blang"},{"id": "35","text": "撒拉族","value": "Salar"},{"id": "36","text": "毛南族","value": "Maonan"},{"id": "37","text": "仡佬族","value": "Gelao"},{"id": "38","text": "锡伯族","value": "Xibe"},{"id": "39","text": "阿昌族","value": "Achang"},{"id": "40","text": "普米族","value": "Pumi"},{"id": "41","text": "塔吉克族","value": "Tajik"},{"id": "42","text": "怒族","value": "Nu"},{"id": "43","text": "乌孜别克族","value": "Uzbek"},{"id": "44","text": "俄罗斯族","value": "Russian"},{"id": "45","text": "鄂温克族","value": "Evenki"},{"id": "46","text": "崩龙族(得昂族)","value": "Bumloon"},{"id": "47","text": "保安族","value": "Bonan"},{"id": "48","text": "裕固族","value": "Yugur"},{"id": "49","text": "京族","value": "Gin"},{"id": "50","text": "塔塔尔族","value": "Tatar"},{"id": "51","text": "独龙族","value": "Drung"},{"id": "52","text": "鄂伦春族","value": "Oroqin"},{"id": "53","text": "赫哲族","value": "Hezhen"},{"id": "54","text": "门巴族","value": "Menba"},{"id": "55","text": "珞巴族","value": "Lhobo"},{"id": "56","text": "基诺族","value": "Jino"}]
}

在项目中创建一个本地JSON文件，该文件包含三级联动下拉框所需的数据。例如，包含省、市、区的层级结构。

步骤 2：创建index.html 编写HTML结构
  <div style="width:600px;height:400px;text-align:center;margin:0 auto;border: 1px solid green;"><h1>远端获取JSON数据并解析示例</h1><ul><li>所在学院：<select name="depart" id="depart"><option value="">请选择...</option></select></li><li>班　　级：<select name="class" id="class"><option value="">请选择...</option></select></li><li>民　　族：<select name="nation" id="nation"><option value="">请选择...</option></select></li></ul></div>

在HTML文件中创建三个下拉框，分别用于显示省、市、区的信息：

步骤 3：启动本地HTTP服务器

为了通过Ajax请求读取本地JSON文件，我们需要在本地启动一个HTTP服务器。在命令行中，进入项目目录并运行以下命令：python -m http.server 8080

image.png

image.png

python -m http.server 8080 启动一个简单的HTTP服务器 监听8080端口 数据服务运行在8080端口

使您能够通过 “http://localhost:8080” 访问您的项目。

步骤 4：编写jQuery Ajax代码

使用jQuery的Ajax方法读取本地JSON文件，并在成功加载数据后，将数据填充到相应的下拉框中

$(document).ready(function () {$.ajax({url: "http://localhost:8080/data.json", // 注意使用完整的URLdataType: "json",success: function (data) {// 处理数据并填充省级下拉框// ...},error: function (jqXHR, textStatus, errorThrown) {console.error("Ajax Error:", textStatus, errorThrown);// 处理错误情况，提供用户友好的提示}});
});

步骤 5：实现城市和区级联动
// 在省级下拉框的change事件中
$("#province").change(function () {var selectedProvince = $(this).val();// 根据选中的省份获取相应的城市数据并填充城市下拉框// ...
});// 在城市级下拉框的change事件中
$("#city").change(function () {var selectedCity = $(this).val();// 根据选中的城市获取相应的区数据并填充区下拉框// ...
});

注意事项

在启动本地HTTP服务器时，确保已经安装了Python，并在项目目录中运行命令。如果遇到启动HTTP服务器失败的情况，检查端口是否被占用。

示例代码

以下是完整的HTML和JavaScript代码，用于实现本地JSON文件的三级联动下拉框：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JSON数据调用1</title><style>li {list-style-type: none;text-align: left;}</style><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function () {var classes = ""; // 由于一会还需要使用，所以设成全局变量。var option = '';// 使用 JSONP 跨域请求JSON文件，获取相关数据$.ajax({url: "http://localhost:8000/data1.json",dataType: "json",crossDomain: true,success: function (data) {console.log(data);// data为JSON文件返回的数据，读取数据var depts = data.departments; // 获取部门数据var nations = data.nations; // 民族数据classes = data.classes; // 得到班级数据// 打印部门数据console.log("部门数据:", data.departments);// 打印班级数据console.log("班级数据:", data.classes);// 打印民族数据console.log("民族数据:", data.nations);// 开始给部门下拉框填充值。for (var i = 0; i < depts.length; i++) {option = '<option value="' + depts[i].code + '">' + depts[i].name + '</option>';$('#depart').append(option);}// 开始给民族下拉框填充值。for (var i = 0; i < nations.length; i++) {option = '<option value="' + nations[i].id + '">' + nations[i].text + '</option>';$('#nation').append(option);}},error: function (jqXHR, textStatus, errorThrown) {console.error("JSONP Error:", textStatus, errorThrown);}});// 处理下拉框的联动，选择部门时加载相应的班级// 注意，如果不是同步模式，则这里会拿不到CLASS数据，注意体会。// alert(classes[0].departmentCode);// 选择学院后，加载相应的班级列表，填充下拉框$("#depart").change(function () {var selectedDepartmentCode = $(this).val(); // 得到选中的学院代码$("#class").empty(); // 清空班级下拉框// 根据选中的学院代码过滤班级数据var filteredClasses = classes.filter(function (cls) {return cls.departmentCode === selectedDepartmentCode;});// 填充班级下拉框for (var i = 0; i < filteredClasses.length; i++) {option = '<option value="' + filteredClasses[i].classCode + '">' + filteredClasses[i].className + '</option>';$('#class').append(option);}});});</script>
</head><body><div style="width:600px;height:400px;text-align:center;margin:0 auto;border: 1px solid green;"><h1>远端获取JSON数据并解析示例</h1><ul><li>所在学院：<select name="depart" id="depart"><option value="">请选择...</option></select></li><li>班　　级：<select name="class" id="class"><option value="">请选择...</option></select></li><li>民　　族：<select name="nation" id="nation"><option value="">请选择...</option></select></li></ul></div>
</body></html>

步骤六: 在浏览器打开index.html

在这里插入图片描述

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

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

相关文章

【c】小红的漂亮串

【c】小红的漂亮串

#include<stdio.h> #include<string.h> int main() {char arr[1000];int count0;gets(arr);//在数组中输入字符串int lenstrlen(arr);//求字符串长度printf("%d\n",len);for(int i0;i<len;i){if(arr[i]r){if(arr[i1]e){if(arr[i2]d){countcount1;}}}}…
阅读更多...
关于如何实现图片懒加载

关于如何实现图片懒加载

图片懒加载的原理&#xff1a; 通过延迟加载图片&#xff0c;只有当图片即将进入可视区域时再进行加载&#xff0c;以优化网页加载速度和性能。 具体的实现步骤如下&#xff1a; 将待加载的图片的 src 属性设置为空或者一个占位符&#xff0c;而不是真实的图片链接。监…
阅读更多...
要求CHATGPT高质量回答的艺术：提示工程技术的完整指南—第 19 章：聚类提示

要求CHATGPT高质量回答的艺术：提示工程技术的完整指南—第 19 章：聚类提示

要求CHATGPT高质量回答的艺术&#xff1a;提示工程技术的完整指南—第 19 章&#xff1a;聚类提示 聚类提示是一种允许模型根据某些特征或特性将相似数据点分组的技术。 具体做法是向模型提供一组数据点&#xff0c;并要求它根据某些特征或特性将这些数据点分组。 这种技术适…
阅读更多...
ChatGPT可能即将发布新版本，带有debug功能：支持下载原始对话、可视化对话分支等

ChatGPT可能即将发布新版本，带有debug功能：支持下载原始对话、可视化对话分支等

本文原文来自DataLearnerAI官方网站&#xff1a;ChatGPT内置隐藏debug功能&#xff1a;支持下载原始对话、可视化对话分支等 | 数据学习者官方网站(Datalearner) AIPRM的工作人员最近发现ChatGPT的客户端隐藏内置了一个新的debug特性&#xff0c;可以提高ChatGPT对话的问题调试…
阅读更多...
AZURE==SQL managed instances

AZURE==SQL managed instances

创建资源 创建DB 创建完成后&#xff0c;拿着刚才的账号密码依然连接不上 远程连接 需要开启公网访问和开放相关端口 参考Configure public endpoint - Azure SQL Managed Instance | Microsoft Learn 连接成功
阅读更多...
Python源码分享10：使用海龟画图turtle画哆啦A梦

Python源码分享10：使用海龟画图turtle画哆啦A梦

turtle模块是一个Python的标准库之一&#xff0c;它提供了一个基于Turtle graphics的绘图库。Turtle graphics是一种流行的绘图方式&#xff0c;它通过控制一个小海龟在屏幕上移动来绘制图形。 turtle模块可以让您轻松地创建和控制海龟图形&#xff0c;从而帮助您学习Python编…
阅读更多...
使用xshell连接虚拟机（服务器）

使用xshell连接虚拟机（服务器）

作者&#xff1a;余小小 Xshell Xshell [1] 是一个强大的安全终端模拟软件&#xff0c;它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议。Xshell 通过互联网到远程主机的安全连接以及它创新性的设计和特色帮助用户在复杂的网络环境中享受他们的工作。 Xshell可以…
阅读更多...
SpringDataJPA基础

SpringDataJPA基础

简介 Spring Data为数据访问层提供了熟悉且一致的Spring编程模版&#xff0c;对于每种持久性存储&#xff0c;业务代码通常需要提供不同存储库提供对不同CURD持久化操作。Spring Data为这些持久性存储以及特定实现提供了通用的接口和模版。其目的是统一简化对不同类型持久性存储…
阅读更多...
计算年year、月month和日day对应的是该年的第几天

计算年year、月month和日day对应的是该年的第几天

自定义1个函数day_of_year(year, month, day)&#xff0c;计算并返回年year、月month和日day对应的是该年的第几天。 函数接口定义&#xff1a; int day_of_year(year, month, day);year, month, day分别为输入的年&#xff0c;月&#xff0c;日 裁判测试程序样例&#xff1a…
阅读更多...
华清远见嵌入式学习——QT——作业1

华清远见嵌入式学习——QT——作业1

作业要求&#xff1a; 代码&#xff1a; ①&#xff1a;头文件 #ifndef LOGIN_H #define LOGIN_H#include <QWidget> #include <QLineEdit> //行编辑器类 #include <QPushButton> //按钮类 #include <QLabel> //标签类 #include <QM…
阅读更多...
图像处理之把模糊的图片变清晰

图像处理之把模糊的图片变清晰

1.图片如果是有雾化效果的对图像产生影响的,要先进行图形增强,Retinex是基于深度神经网络了,我在之前图形处理的文章一路从神经网络(概率统计)—>积卷神经网络(对区域进行概率统计,对图片进行切割多个识别对象)–>深度积卷神经网络(RetinexNet也是模拟人脑的处理过程,增加…
阅读更多...
Spark例子

Spark例子

Spark例子 以下是一个简单的AI Spark例子&#xff1a; 假设我们有一个数据集&#xff0c;包含房屋大小、卧室数量和售价。我们想使用Spark来预测房屋售价。 首先&#xff0c;我们需要导入所需的库和数据。在这个例子中&#xff0c;我们将使用Pyspark。 python from pyspark…
阅读更多...
Hive增强的聚合、多维数据集、分组和汇总

Hive增强的聚合、多维数据集、分组和汇总

Hive多维分析 1、多维分析概述2、GROUPING SETS多维分组3、GROUPING__ID函数4、ROLLUP与CUBE语法糖5、多维分析常见问题与解决春雨惊春清谷天，夏满芒夏暑相连；秋处露秋寒霜降，冬雪雪冬小大寒。今天是2023年的最后一个节气：大雪。大雪节气之后，全国气温显著下降，北方冷空气…
阅读更多...
图表管理功能（前后端实现增删改查）

图表管理功能（前后端实现增删改查）

图表管理功能&#xff08;前后端实现增删改查&#xff09; 后端 库表设计 create table chart (id bigint auto_increment comment idprimary key,goal text null comment 分析目标,chartData text …
阅读更多...
css弹窗动画效果，示例弹窗从底部弹出

css弹窗动画效果，示例弹窗从底部弹出

从底部弹出来&#xff0c;有过渡动画效果 用max-height可以自适应内容的高度&#xff0c;当内容会超过最大高度时可以在弹窗里加个scroll-view 弹窗不能用v-if来隐藏&#xff0c;不然transition没效果&#xff0c;transition只能对已有dom元素起效果&#xff0c;所以用透明和v…
阅读更多...
软件测试入门：静态测试

软件测试入门：静态测试

什么是静态测试 顾名思义&#xff0c;这里的静态是指程序的状态&#xff0c;即在不执行代码的情况下检查软件应用程序中的缺陷。进行静态测试是为了仅早在开发的早期阶段发现程序缺陷&#xff0c;因为这样可以更快速地识别缺陷并低成本解决缺陷&#xff0c;它还有助于查找动态测…
阅读更多...
GO设计模式——11、装饰器模式（结构型）

GO设计模式——11、装饰器模式（结构型）

目录 装饰器模式&#xff08;Decorator Pattern&#xff09; 装饰器模式的核心角色&#xff1a; 优缺点 使用场景 代码实现 装饰器模式&#xff08;Decorator Pattern&#xff09; 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功…
阅读更多...
Elasticsearch从入门到精通

Elasticsearch从入门到精通

Elasticsearch简介 应用开发中一个比较常见的功能是搜索&#xff0c;传统应用的解决方案&#xff1a;数据库的模糊查询。 模糊查询存在的问题&#xff1a; 海量数据下效率低下功能不够丰富&#xff1a;不够智能、不能高亮 Elasticsearch 是一个分布式、RESTful 风格的搜索和数据…
阅读更多...
鸿蒙原生应用/元服务开发-Stage模型能力接口（一）

鸿蒙原生应用/元服务开发-Stage模型能力接口（一）

ohos.app.ability.Ability (Ability基类)一、说明 UIAbility和ExtensionAbility的基类&#xff0c;提供系统配置更新回调和系统内存调整回调。本模块首批接口从API version 9 开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。本模块接口仅可在Stag…
阅读更多...
flex布局的flex为1到底是什么

flex布局的flex为1到底是什么

参考博客&#xff1a;flex:1什么意思_公孙元二的博客-CSDN博客 flex&#xff1a;1即为flex-grow&#xff1a;1&#xff0c;经常用作自适应布局&#xff0c;将父容器的display&#xff1a;flex&#xff0c;侧边栏大小固定后&#xff0c;将内容区flex&#xff1a;1&#xff0c;内…
阅读更多...
最新文章

Copyright @ 2022~2023