佛山制作网站设计报价,服装网站的设计理念,佛山新网站建设报价,网站建设视屏目录 前言
1.全国省市区的Json数据
2.找到Json数据文件(在此博文绑定资源)之后#xff0c;放到resource目录下。
3.通过类加载器加载资源文件#xff0c;读取Json文件 3.1 创建JsonLoader类 3.2 注入JsonLoader实体#xff0c;解析Json文件
4.构建前端Html页面
5.通过…目录 前言
1.全国省市区的Json数据
2.找到Json数据文件(在此博文绑定资源)之后放到resource目录下。
3.通过类加载器加载资源文件读取Json文件 3.1 创建JsonLoader类 3.2 注入JsonLoader实体解析Json文件
4.构建前端Html页面
5.通过ajax获取从后端获取数据
6.通过监听事件完成Html省市区联动
7.实现效果 前言 关键技术SpringBoot、Html、Jquery、js、ajax 在网上找到的资料都比较乱对于初学者来说可能不太友好。以前我刚开始学习Html的时候也搞不清楚这个要怎么做找了好久的资料都没法实现就算是实现了也没有完整的教程现在实现了整理好了就想分享一下给每一位热爱编程的小伙伴。
1.全国省市区的Json数据
[{province: 北京市,code: 110000,citys: [{city: 北京市,code: 110100000000,areas: [{area: 东城区,code: 110101000000},{area: 西城区,code: 110102000000},{area: 朝阳区,code: 110105000000},{area: 丰台区,code: 110106000000},{area: 石景山区,code: 110107000000},{area: 海淀区,code: 110108000000},{area: 门头沟区,code: 110109000000},{area: 房山区,code: 110111000000},{area: 通州区,code: 110112000000},{area: 顺义区,code: 110113000000},{area: 昌平区,code: 110114000000},{area: 大兴区,code: 110115000000},{area: 怀柔区,code: 110116000000},{area: 平谷区,code: 110117000000},{area: 密云区,code: 110118000000},{area: 延庆区,code: 110119000000}]}]}
......此处省略好多个省市区。
]
2.找到Json数据文件(在此博文绑定资源)之后放到resource目录下。 3.通过类加载器加载资源文件读取Json文件 3.1 创建JsonLoader类
package com.company.project.utils;import com.alibaba.fastjson.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.Resource;
import org.springframework.core.io.ResourceLoader;
import org.springframework.stereotype.Component;import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;Component
public class JsonLoader {Autowiredprivate ResourceLoader resourceLoader;public JSONArray loadJsonFile(String fileName) throws IOException {Resource resource resourceLoader.getResource(classpath: fileName);try (InputStream inputStream resource.getInputStream();BufferedReader reader new BufferedReader(new InputStreamReader(inputStream))) {StringBuilder result new StringBuilder();String line;while ((line reader.readLine()) ! null) {result.append(line).append(\n);}return JSONArray.parseArray(result.toString());}}
}3.2 注入JsonLoader实体解析Json文件 4.构建前端Html页面
div classlayui-form stylemargin: 20px;div classlayui-form-itemlabel classlayui-form-label省份/labeldiv classlayui-input-blockselect classcustom-select nameprovince idprovince lay-verifyrequired lay-searchoption value请选择省份/option/select/div/divdiv classlayui-form-itemlabel classlayui-form-label城市/labeldiv classlayui-input-blockselect classcustom-select namecity idcity lay-verifyrequired lay-searchoption value请选择城市/option/select/div/divdiv classlayui-form-itemlabel classlayui-form-label区县/labeldiv classlayui-input-blockselect classcustom-select namecounty idcounty lay-verifyrequired lay-searchoption value请选择区县/option/select/div/div/div
5.通过ajax获取从后端获取数据 /// 使用jQuery的$.ajax方法$.ajax({url: ctx zhWeather/getCity, // 你要请求的URLtype: GET, // 请求方式GET或POSTdataType: json, // 预期服务器返回的数据类型data: { // 发送到服务器的数据},success: function(data) {loadData(JSON.stringify(data.data))// 请求成功时执行的回调函数console.log(data); // 处理返回的数据},error: function(xhr, status, error) {// 请求失败时执行的回调函数console.error(请求失败: error);}});
6.通过监听事件完成Html省市区联动 //select2搜索下拉列表样式$(.custom-select).select2({placeholder: 请选择,allowClear: true});// 假设这是从Ajax请求中获取的因此我们将其放入一个函数中function loadData(data) {data JSON.parse(data)// 填充省份$.each(data, function(index, province) {$(#province).append($(option, {value: province.code,text: province.province}));});// 省份选择变化时填充城市$(#province).change(function() {var selectedProvinceCode $(this).val();var cityOptions ;$.each(data, function(index, province) {if (province.code selectedProvinceCode) {$.each(province.citys, function(index, city) {cityOptions option value city.code city.city /option;});}});$(#city).html(option value请选择城市/option cityOptions);$(#county).html(option value请选择区县/option); // 清除区县选项});// 城市选择变化时填充区县这里省略逻辑与填充城市类似$(#city).change(function() {var selectedCityCode $(this).val();var countyOptions option value请选择区县/option;var currentProvinceCode $(#province).val(); // 获取当前选中的省份代码// 遍历data数组找到对应的省份和城市$.each(data, function(index, province) {if (province.code currentProvinceCode) {$.each(province.citys, function(index, city) {if (city.code selectedCityCode) {// 找到对应的城市后遍历其区县$.each(city.areas, function(index, area) {countyOptions option value area.code area.area /option;});// 一旦找到匹配的城市就跳出内层循环return false;}});// 一旦找到匹配的省份也跳出外层循环可选但在这个场景下可能不是必需的// return false;}});$(#county).html(countyOptions);});// 初始化时选择一个省份可选$(#province).val(data[0].code).trigger(change);}
7.实现效果 我会把项目绑定到博文资源文件希望能够帮助到大家。谢谢
