当前位置： 首页 > article >正文

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

article 2024/11/13 12:43:06

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.kler.cn/a/160912.html

相关文章：

  • vue+Leaflet.PM插件实现创建和编辑几何图形(点、线、面、圆等)
  • 智慧仓储物流可视化平台
  • Python数据分析NumPy和pandas（二十九、其他Python可视化工具）
  • Android中Activity启动的模式
  • 数据库MySQL索引详解
  • Linux驱动开发（4）：Linux的设备模型
  • 【Java基础系列】JavaWeb入门
  • Linux CentOS本地部署SQL Server数据库结合cpolar内网穿透实现公网访问
  • 编译器和 IR：LLVM IR、SPIR-V 和 MLIR
  • QT linux下使用Qt Creator调试附加进程，加快调试
  • 大量 SVG 图标在 React 中的极速集成与应用
  • Windows精品必备工具,总有一款适合你
  • cesium 融合视频
  • Redis 数据的持久化 RDB、AOF、RDB + AOF、No persistence 各自优缺点
  • 程序员如何开发高级python爬虫？
  • 从零开始，利用ChatGPT学会写作的完整指南
  • idea报错——Access denied for user ‘root‘@‘localhost‘ (using password: YES)
  • 使用xshell连接虚拟机（服务器）
  • 阿里云Arthas使用——通过watch命令查看类的返回值 捞数据出来
  • 用C语言实现链栈的基本操作
  • 封装了一个顺滑嵌套滚动的框架
  • 结构体和链表例题2
  • 浏览器开发者工具使用(F12)
  • Redis中持久化策略RDB与AOF优缺点对比
  • 解锁全球潜力：IT外包解决跨国企业海外分支的IT需求
  • 软件测试外包干了2个月，技术进步2年。。。