步骤 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
为了通过Ajax请求读取本地JSON文件，我们需要在本地启动一个HTTP服务器。在命令行中，进入项目目录并运行以下命令：python -m http.server 8080
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
![杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]](https://ucc.alicdn.com/pic/developer-ecology/xsqfoqm5pyibg_09d05e48e8364b9588701e9347609934.gif?x-oss-process=image/resize,h_160,m_lfit)
