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.hqwc.cn/news/255065.html

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

相关文章

CRM客户管理系统，不止管理客户。

CRM客户管理系统，不止管理客户。

CRM系统现在已经成为企业与客户建立良好关系、提高销售业绩的优先选择。关于CRM的功能&#xff0c;不同的企业包括CRM软件厂商都对CRM系统有不同的定义。基于此&#xff0c;我们来聊聊CRM客户管理系统除了管客户还有什么功能&#xff1f; 1、客户管理 有些企业管理客户的方式…
阅读更多...
探索低代码的潜力、挑战与未来展望

探索低代码的潜力、挑战与未来展望

低代码开发作为一种新兴的开发方式&#xff0c;正在逐渐改变着传统的编程模式&#xff0c;低代码使得开发者无需编写大量的代码即可快速构建各种应用程序。然而&#xff0c;低代码也引发了一系列争议&#xff0c;有人称赞其为提升效率的利器&#xff0c;也有人担忧其可能带来的…
阅读更多...
GUI的简单概述和基本使用

GUI的简单概述和基本使用

GUI的概念 1&#xff0c;到目前为止&#xff0c;我们编写的都是控制输入的程序&#xff0c;操作使用非常不直观&#xff0c;采取一直方式让效果呈现在窗口上。 2&#xff0c;GUI及图形界面指采用图像方式显示的用户界面&#xff0c;与早期计算机的命令行界面相比&#xff0c;…
阅读更多...
文件拖拽操作工具 Dropzone 4 最新 for mac

文件拖拽操作工具 Dropzone 4 最新 for mac

Dropzone 4是一款Mac平台上的应用程序&#xff0c;提供了一个方便快捷的方式来执行各种任务。它可以将常用工具和操作整合到一个简洁的界面中&#xff0c;使用户能够更高效地完成日常工作。 以下是Dropzone 4的一些主要特点&#xff1a; 拖放功能&#xff1a;通过将文件、文件…
阅读更多...
拨号连接bat命令和拨号错误623，系统无法找到此连接的电话簿项的解决方法

拨号连接bat命令和拨号错误623，系统无法找到此连接的电话簿项的解决方法

一、拨号bat命令 1、首先创建一个拨号连接&#xff0c;注意连接名称要使用英文 2、创建一个bat文件&#xff0c;里面内容 echo off chcp 65001rem 定义连接参数&#xff0c;第一个是用户名&#xff0c;第二个是密码 set usernameS11111111111 set passwords11111111111 set…
阅读更多...
决战排序之巅(一)

决战排序之巅(一)

决战排序之巅 插入排序直接插入排序 void InsertSort(int* arr, int n)希尔排序 void ShellSort(int* arr, int n)测试插入排序测试函数 void verify(int* arr, int n)测试 InsertSort测试 ShellSort测试速度 InsertSort & ShellSort 选择排序直接选择排序 void SelectSort…
阅读更多...
数据分析基础之《matplotlib（3）—散点图》

数据分析基础之《matplotlib（3）—散点图》

一、常见图形种类及意义 1、matplotlib能够绘制折线图、散点图、柱状图、直方图、饼图。我们需要知道不同的统计图的意义&#xff0c;以此来决定选择哪种统计图来呈现我们的数据 2、折线图plot 说明&#xff1a;以折线的上升或下降来表示统计数量的增减变化的统计图 特点&…
阅读更多...
vs2022linux应用开发中出现“未定义标识符_Float128“

vs2022linux应用开发中出现“未定义标识符_Float128“

开发平台包括&#xff1a;Win11、VS2022、WLS2。 当vs2022对应用程序报编译错误时&#xff0c;有时也会报以下信息&#xff1a; 但应用程序没有编译错误后&#xff0c;上述信息不再出现。
阅读更多...
解析100G QSFP28 ER4光模块：超越传统光纤传输限制

解析100G QSFP28 ER4光模块：超越传统光纤传输限制

科技的进步和数据中心的快速发展&#xff0c;使得高速光通信模块的需求也在不断增长。100G QSFP28 ER4光模块作为一种新型的高速光通信模块&#xff0c;正逐渐受到广泛关注。前几期文章内容我们了解了40G ER4 系列光模块产品&#xff0c;今天跟随小易来看看更高速率的100G ER4光…
阅读更多...
Linux中的网络时间服务器

Linux中的网络时间服务器

本章主要介绍网络时间的服务器 使用chrony配置时间服务器配置chrony客户端服务器同步时间 1.1 时间同步的重要性 一些服务对时间要求非常严格&#xff0c;例如如图所示的由三台服务器搭建的ceph集群 这三台服务器的时间必须保持一致&#xff0c;如果不一致&#xff0c;就会显…
阅读更多...
小白学Java之数组问题——第三关黄金挑战

小白学Java之数组问题——第三关黄金挑战

内容1.数组中出现次数超过一般的数字2.数组中出现一次的数字3.颜色分类问题 1.数组中出现次数超过一半的数字 这是剑指offer中的一道题目&#xff0c;数组中有一个数字出现的次数超过数组长度的一半&#xff0c;请找出这个数字。 例如&#xff1a;输入如下所示的一个长度为9…
阅读更多...
探索鸿蒙 Image图片显示组件

探索鸿蒙 Image图片显示组件

Image 声明Image组件并设置图片源 Image(src: stirng|PixelMap|Resource) string 通常用于加载网络图片&#xff0c;需要申请网络访问权限:ohos.permission.INIERNET Image(https://xxx.png)PixelMap 可以加载像素图&#xff0c;常用在图片编辑中 Image(pixelMapObject) 使用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023