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

news2024/11/27 0:44:05

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", // 注意使用完整的URL
        dataType: "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.coloradmin.cn/o/1291825.html

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

相关文章

基于若依的ruoyi-nbcio流程管理系统支持支持定时边界事件和定时捕获事件

基于若依的ruoyi-nbcio流程管理系统支持支持定时边界事件和定时捕获事件

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 1、定时边界事件 <template><div class"panel-tab__content"><!--目前只处理定…
阅读更多...
【Java系列】详解多线程（一）

【Java系列】详解多线程（一）

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Java系列专栏】 本专栏旨在分享学习Java的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 一、背景引入二、线程…
阅读更多...
解决git提交完代码后切换到自己分支pull拉错远程分支

解决git提交完代码后切换到自己分支pull拉错远程分支

&#x1f979;MD 我是猪&#xff01;拉代码的时候净想着干饭了&#xff0c;一下给拉错了&#x1f624; &#x1f338;方法一&#xff1a;打印日志&#xff0c;然后回退版本 &#x1f338;方法二&#xff1a; 舍弃本地修改 git checkout .直接把冲突的文件提交到自己的分支&a…
阅读更多...
Linux内核上游提交完整流程及示例

Linux内核上游提交完整流程及示例

参考博客文章&#xff1a; 向linux内核提交代码 - 知乎 一、下载Linux内核源码 通过git下载Linux内核源码&#xff0c;具体命令如下&#xff1a; git clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git 实际命令及结果如下&#xff1a; penghaoDin…
阅读更多...
【华为网络-配置-025】- 同 VLAN 下不同网段通信（启用 Sub 地址）

【华为网络-配置-025】- 同 VLAN 下不同网段通信（启用 Sub 地址）

要求&#xff1a; 1、各接口配置 VLAN 后配置 Sub 地址使 PC1 与 PC3 通信。 一、sub 地址配置 [LSW1]vlan 10 [LSW1]port-group group-member GigabitEthernet 0/0/1 to GigabitEthernet 0/0/2 [LSW1-port-group]port link-type access [LSW1-port-group]port default vla…
阅读更多...
掌握接口测试全流程，让你成为专业接口测试大师！

掌握接口测试全流程，让你成为专业接口测试大师！

扫盲内容 1.为什么要做接口测试&#xff1f; 2.怎样做接口测试&#xff1f; 3.接口测测试点是什么&#xff1f; 4.接口测试都要掌握哪些知识&#xff1f; 5.其他相关知识&#xff1f; 一.为什么要做接口测试&#xff1f; ①.越底层发现bug&#xff0c;它的修复成本是越低…
阅读更多...
Adobe XD学习攻略：成为设计大师的捷径！

Adobe XD学习攻略：成为设计大师的捷径！

Adobexd是什么软件&#xff1f;Adobexd是一站式UI/UX设计平台&#xff0c;结合设计和建立原型功能。用户可以使用Adobexd进行网页设计、移动应用程序设计和原型图绘制&#xff0c;也可以使用Adobexd软件更高效、更准确地完成静态编译和框架图到交互原型的转换。 然而&#xff…
阅读更多...
ubuntu22.04 显卡驱动最简单的安装方法

ubuntu22.04 显卡驱动最简单的安装方法

1.拉取可选择安装的显卡驱动版本 sudo apt-get purge nvidia* #apt 的 update 和 upgrade 的区别 #apt update 命令只会获得系统上所有包的最新信息&#xff0c;并不会下载或者安装任何一个包。 #apt upgrade 命令来把这些包下载和升级到最新版本。 2.sudo apt update 3.安装…
阅读更多...
如何批量给文件名加文字？

如何批量给文件名加文字？

如何批量给文件名加文字&#xff1f;在我们的日常生活和工作中&#xff0c;经常会面临大量文件需要分类整理&#xff0c;并且可能需要在文件名后面添加一串文字作为备注。如果只是少量文件&#xff0c;我们可以手动逐个添加备注&#xff0c;但如果涉及上千甚至上万个文件&#…
阅读更多...
vue项目下npm或yarn下安装echarts多个版本

vue项目下npm或yarn下安装echarts多个版本

最近在大屏展示的时候&#xff0c;用到了百度的echarts图表库&#xff0c;看完效果图后&#xff0c;又浏览了一下echarts官网案例&#xff0c;大同小异。但是搬砖过程中发现实际效果和demo相差甚远&#xff0c;一番折腾发现&#xff0c;项目中安装的是echarts4.x版本&#xff0…
阅读更多...
重估拼多多，TEMU带给拼多多的不止是市值增量

重估拼多多，TEMU带给拼多多的不止是市值增量

监制 | 何玺 排版 | 叶媛 谁也没有想到&#xff0c;中国电商的格局改变居然如此之快。 12月29日&#xff0c;拼多多市值超越多年雄踞国内电商头把交椅的阿里巴巴&#xff0c;成为美股市值最大中概股。从此时开始&#xff0c;中国电商开始“拼”时代。 拼多多凭什么能超越阿里…
阅读更多...
FFmpeg之将视频转为16:9(横屏)或9:16(竖屏)(三十六)

FFmpeg之将视频转为16:9(横屏)或9:16(竖屏)(三十六)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒体系统工程师系列【原创干货持续更新中……】🚀 人生格言： 人生从来没有捷径，只…
阅读更多...
3、Linux_系统用户管理

3、Linux_系统用户管理

1.Linux 用户管理 1.1概述 Linux系统是一个多用户多任务的操作系统&#xff0c;任何一个要使用系统资源的用户&#xff0c;都必须首先向系统管理员申请一个账号&#xff0c;然后以这个账号的身份进入系统。root用户是系统默认创建的管理员账号。 1.2添加用户 语法 useradd […
阅读更多...
Kubernetes入门笔记——（2）k8s设计文档

Kubernetes入门笔记——（2）k8s设计文档

​k8s最初源自谷歌的Brog项目&#xff0c;架构与其类似&#xff0c;主要包括etcd、api server、controller manager、scheduler、kubelet和kube-proxy等组件 etcd&#xff1a;分布式存储&#xff0c;保存k8s集群的状态 api server&#xff1a;资源操作的唯一入口&#xff0c;…
阅读更多...
如何用docker在自己服务器上部署springboot项目

如何用docker在自己服务器上部署springboot项目

一、将springboot项目打包 1、maven clean项目 2、maven package项目 打包成功之后生成jar文件&#xff08;在target目录下&#xff09; 3、为Java创建Dockerfile 引入jdk8的Docker镜像 FROM openjdk:8 为了使运行其余命令时更容易&#xff0c;让我们设置映像的工作目录。这将…
阅读更多...
LLM之RAG实战（一）：使用Mistral-7b, LangChain, ChromaDB搭建自己的WEB聊天界面

LLM之RAG实战（一）：使用Mistral-7b, LangChain, ChromaDB搭建自己的WEB聊天界面

一、RAG介绍 如何使用没有被LLM训练过的数据来提高LLM性能&#xff1f;检索增强生成&#xff08;RAG&#xff09;是未来的发展方向&#xff0c;下面将解释一下它的含义和实际工作原理。 ​ 假设您有自己的数据集&#xff0c;例如来自公司的文本文档。如何让ChatGPT和其他…
阅读更多...
响应式编程又变天了？看JDK21虚拟线程如何颠覆！

响应式编程又变天了？看JDK21虚拟线程如何颠覆！

本文解释为啥会有响应式编程&#xff0c;为什么它在开发者中不太受欢迎&#xff0c;以及引入 Java 虚拟线程后它可能最终会消失。 命令式风格编程一直深受开发者喜爱&#xff0c;如 if-then-else、while 循环、函数和代码块等结构使代码易理解、调试&#xff0c;异常易追踪。然…
阅读更多...
基于gitlab的webhook集成jenkins，并在gitlab流水线中展示jenkins的job状态信息

基于gitlab的webhook集成jenkins，并在gitlab流水线中展示jenkins的job状态信息

文章目录 1. 环境信息2. gitlab 部署3. jenkins部署4. gitlab集成jenkins4.1 jenkins的凭据上保存gitlab的账号信息4.2 jenkins中配置gitlab的连接信息4.3 编写jenkins上pipeline文件4.4 jenkins上创建pipeline项目4.5 gitlab上配置webhooks事件4.6 测试 1. 环境信息 gitlab服…
阅读更多...
Python-Opencv图像处理的小坑

Python-Opencv图像处理的小坑

1.背景 最近在做一点图像处理的事情&#xff0c;在做处理时的cv2遇到一些小坑&#xff0c;希望大家遇到的相关的问题可以注意&#xff01;&#xff01; 2. cv2.imwrite保存图像 cv2.imwrite(filename, img, [params]) filename&#xff1a;需要写入的文件名&#xff0c;包括路…
阅读更多...
前端打包环境配置步骤

前端打包环境配置步骤

获取node安装包并解压 获取node安装包 wget https://npmmirror.com/mirrors/node/v16.14.0/node-v16.14.0-linux-x64.tar.xz 解压 tar -xvf node-v16.14.0-linux-x64.tar.xz 创建软链接 sudo ln -s 此文件夹的绝对路径/bin/node /usr/local/bin/node&#xff0c;具体执行如下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023