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

news/2024/7/11 1:16:50 标签: 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", // 注意使用完整的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.niftyadmin.cn/n/5244471.html

相关文章

nodeJS爬虫-爬取虎嗅新闻

1.安装依赖库到本地&#xff0c;需要的库有&#xff1a;安装方法见Node.js笔记说明 const superagent require(superagent); const cheerio require(cheerio); const async require(async); const fs require(fs); const url require(url); const request require(reques…

要求CHATGPT高质量回答的艺术:提示工程技术的完整指南—第 9 章:种子词提示

要求CHATGPT高质量回答的艺术&#xff1a;提示工程技术的完整指南—第 9 章&#xff1a;种子词提示 种子词提示是一种通过提供特定种子词或短语来控制 ChatGPT 输出的技术。 种子词提示符的提示公式是种子词或短语&#xff0c;然后是指令 “请根据以下种子词生成文本”。 示…

【3DsMax】制作简单的骨骼动画

效果 步骤 首先准备4个板子模型展开放置好 添加一个4段的骨骼 选中其中的一块板子添加蒙皮命令 在蒙皮的参数面板中&#xff0c;设置每块板子对应哪块骨骼 设置好后你可以发现此时就已经可以通过骨骼来控制模型了 接下来就可以制作动画 点击左下角“时间配置”按钮 设置一下动…

打工人副业变现秘籍,某多/某手变现底层引擎-Stable Diffusion简介

Stable Diffusion是2022年发布的深度学习文本到图像生成模型,它主要用于根据文本的描述产生详细图像,尽管它也可以应用于其他任务,如

uniapp(微信小程序)聊天实例,支持图片,语音,表情(附源码)

效果预览 安装教程 配置 请参考Dome 会话配置 {info:{// 用户关键字userKey:2666,// 用户手机userPhone:15252156614,// 用户昵称userName: 健健,// 头像headImg: http://d.hiphotos.baidu.com/image/h%3D300/sign0defb42225381f3081198ba999004c67/6159252dd42a2834a75bb01…

【Python动漫系列】懒羊羊(完整代码)

文章目录 懒羊羊环境需求完整代码程序分析系列文章懒羊羊 懒羊羊是国产动画片《喜羊羊与灰太狼》中的主角之一,由中国著名动画制作公司灌篮高手动画股份有限公司制作。该动画片于2006年首播,至今已经播出多个季度,深受孩子们的喜爱。 懒羊羊是一只懒散、善良、机智的小绵羊…

相交链表(LeetCode 160)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路方法一&#xff1a;暴力法方法二&#xff1a;哈希表方法三&#xff1a;双栈方法四&#xff1a;双指针&#xff1a;记录链表长度方法五&#xff1a;双指针&#xff1a;互换遍历 5.实现示例参考文献 1.问题描述 给两个单链表的…

每日一题(LeetCode)----字符串--重复的子字符串

每日一题(LeetCode)----字符串–重复的子字符串 1.题目&#xff08;459. 重复的子字符串&#xff09; 给定一个非空的字符串 s &#xff0c;检查是否可以通过由它的一个子串重复多次构成。 示例 1: 输入: s "abab" 输出: true 解释: 可由子串 "ab" 重复两…