目录
前言
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 {
@Autowired
private 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 class="layui-form" style="margin: 20px;">
<div class="layui-form-item">
<label class="layui-form-label">省份：</label>
<div class="layui-input-block">
<select class="custom-select" name="province" id="province" lay-verify="required" lay-search="">
<option value="">请选择省份</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">城市：</label>
<div class="layui-input-block">
<select class="custom-select" name="city" id="city" lay-verify="required" lay-search="">
<option value="">请选择城市</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">区县：</label>
<div class="layui-input-block">
<select class="custom-select" name="county" id="county" lay-verify="required" lay-search="">
<option value="">请选择区县</option>
</select>
</div>
</div>
</div>5.通过ajax获取从后端获取数据
/// 使用jQuery的$.ajax方法
$.ajax({
url: ctx + 'zhWeather/getCity', // 你要请求的URL
type: 'GET', // 请求方式，GET或POST
dataType: '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.实现效果
我会把项目绑定到博文资源文件，希望能够帮助到大家。谢谢
