首页 前端知识 jQuery ajax读取本地json文件 三级联动下拉框

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

2024-05-23 20:05:10 前端知识 前端哥 846 445 我要收藏

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

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9156.html
标签
评论
发布的文章

jQuery初学

2024-05-29 10:05:14

Jquery中$,web开发语言

2024-05-29 10:05:25

jQuery 实现小球撞击动画

2024-05-29 10:05:04

echarts 横向柱状图

2024-05-29 10:05:01

Echarts:读取动态数据

2024-05-29 10:05:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!