一、从0到1实现AJAX三级联动：核心步骤全拆解
1.1 先搞懂：为什么传统方法不行？
你可能会说，我直接把所有省市县数据写死在JS里不行吗？确实能跑，但数据量大的时候问题就来了——全国34个省份、300多个城市、2800多个区县，全部加载到前端会让页面首次加载变慢。我之前试过把完整数据写进JS，结果页面加载时间多了2秒，谷歌PageSpeed评分直接从85掉到62。而AJAX的好处就是“按需加载”：用户选了省份才加载对应城市，选了城市才加载对应区县，数据量小了，页面自然更轻快。
还有种常见做法是用iframe嵌套，这种方式虽然能局部刷新，但会造成页面结构混乱，而且iframe里的样式很难和主页面统一。去年帮一个政务网站改代码时，他们就用的iframe，用户选省份后iframe刷新时会闪一下白屏，后来换成AJAX后，这种“闪白”问题直接消失了。
1.2 数据结构：用JSON格式存地区数据更高效
要实现联动，首先得有规范的数据结构。我 用JSON数组，因为它轻量、易解析，前后端都支持。下面是我常用的格式：
[
{
"id": "110000",
"name": "北京市",
"children": [
{
"id": "110100",
"name": "北京市",
"children": [
{"id": "110101", "name": "东城区"},
{"id": "110102", "name": "西城区"}
// 更多区县...
]
}
]
},
// 更多省份...
]
这种“省份→城市→区县”的嵌套结构，和用户选择逻辑完全一致，解析起来特别方便。你可能会问，为什么不用数据库存？其实前后端都能存，小项目可以直接把JSON文件放前端（比如area-data.json），大项目 后端提供API接口，我后面会讲两种情况的实现。
1.3 AJAX请求+动态渲染：核心代码手把手教
接下来是最关键的部分：用AJAX获取数据并动态更新下拉框。我以jQuery为例（原生JS也类似，只是代码多一点），带你写一遍核心代码。
第一步：HTML结构
先搭好三个下拉框，给它们id方便JS操作：
注意给城市和区县下拉框加disabled，用户没选上一级时不能操作，这是基本的交互规范。
第二步：加载省份数据
页面加载完成后，先用AJAX请求省份数据（如果是前端JSON文件，就请求文件路径；如果是后端API，就请求接口URL）：
// 页面加载完成后执行
$(function() {
// 请求省份数据
$.ajax({
url: 'area-data.json', // 数据地址，后端接口就写'/api/provinces'
type: 'GET',
dataType: 'json',
success: function(data) {
// 渲染省份下拉框
renderSelect('#province', data);
// 给省份下拉框绑定change事件
$('#province').change(function() {
// 获取选中的省份数据
const provinceId = $(this).val();
const provinceData = data.find(item => item.id === provinceId);
// 有城市数据才启用城市下拉框
if (provinceData && provinceData.children) {
$('#city').prop('disabled', false).empty();
// 渲染城市下拉框
renderSelect('#city', provinceData.children);
// 重置区县下拉框
$('#district').prop('disabled', true).empty();
} else {
$('#city').prop('disabled', true).empty();
$('#district').prop('disabled', true).empty();
}
});
},
error: function() {
alert('省份数据加载失败，请刷新页面重试');
}
});
});
这里有个细节：renderSelect是我封装的渲染下拉框函数，后面会讲，这样能避免重复代码。
第三步：封装渲染函数
写一个通用函数，传入下拉框选择器和数据，自动生成：
function renderSelect(selector, data) {
// 添加"请选择"选项
$(selector).append('请选择');
// 遍历数据生成option
data.forEach(item => {
$(selector).append(${item.name});
});
}
这个函数很简单，但能帮你少写很多重复代码。我之前没封装的时候，每个下拉框都写一遍for循环，改起来特别麻烦，后来封装后，维护效率提高了不少。
第四步：城市和区县的联动逻辑
城市下拉框的change事件和省份类似，只是数据来源是选中省份的children：
// 给城市下拉框绑定change事件（放在省份success回调里）
$('#city').change(function() {
const cityId = $(this).val();
// 获取选中的省份数据（需要存一下省份数据，这里简化处理）
const provinceId = $('#province').val();
const provinceData = data.find(item => item.id === provinceId);
const cityData = provinceData.children.find(item => item.id === cityId);
if (cityData && cityData.children) {
$('#district').prop('disabled', false).empty();
renderSelect('#district', cityData.children);
} else {
$('#district').prop('disabled', true).empty();
}
});
到这里，基本的联动逻辑就实现了。你可以复制代码试试，记得把area-data.json换成你的数据文件路径。
1.4 前后端数据交互：两种方案怎么选？
上面的例子用的是前端JSON文件，适合数据量小、更新频率低的场景（比如个人博客、小型网站）。如果是中大型项目（比如电商、政务系统）， 用后端接口，下面对比两种方案的优缺点：
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 前端JSON文件 | 无需后端开发，请求速度快 | 数据更新需改文件，体积大时影响加载 | 小型网站、数据稳定项目 |
| 后端API接口 | 数据实时更新，按需加载更灵活 | 需后端配合，多一次网络请求 | 电商、政务等中大型系统 |
如果你用后端接口，只需要把AJAX的url改成接口地址，比如/api/getCities?provinceId=110000，其他逻辑基本一样。MDN Web Docs上有关于AJAX请求的详细说明，你可以参考 MDN XMLHttpRequest教程，里面有原生JS的实现示例。
二、优化技巧：让你的联动功能更丝滑
学会基础实现后，你可能会发现一些问题：比如用户频繁切换省份时请求太多、网络慢的时候下拉框空白、某些地区没有区县数据时界面混乱。这些细节处理不好，用户体验还是会打折扣。我结合过去3年的开发经验， 了3个关键优化点，帮你把功能从“能用”变成“好用”。
2.1 数据缓存：减少重复请求
用户选了“北京市”又选“河北省”，再切回“北京市”时，如果重新请求数据就很浪费。这时候缓存就能派上用场，我通常用两种方式：
方式一：localStorage缓存
把请求到的数据存在localStorage，下次直接读取：
// 请求省份数据时先检查缓存
const cachedProvinces = localStorage.getItem('areaProvinces');
if (cachedProvinces) {
renderSelect('#province', JSON.parse(cachedProvinces));
} else {
$.ajax({
url: 'area-data.json',
success: function(data) {
localStorage.setItem('areaProvinces', JSON.stringify(data));
renderSelect('#province', data);
}
});
}
注意设置缓存过期时间，比如存7天，避免数据过时。我之前给一个物流网站做的时候，没设过期时间，后来行政区划调整，用户选到了已撤销的区县，被投诉了好几次，后来加了过期时间才解决。
方式二：内存缓存
如果数据不需要持久化，存内存更轻量：
// 定义全局变量存缓存
const areaCache = {
provinces: null,
cities: {} // 键是省份id，值是城市数据
};
// 请求城市数据时先查缓存
const provinceId = $('#province').val();
if (areaCache.cities[provinceId]) {
renderSelect('#city', areaCache.cities[provinceId]);
} else {
$.ajax({
url: /api/getCities?provinceId=${provinceId},
success: function(data) {
areaCache.cities[provinceId] = data;
renderSelect('#city', data);
}
});
}
内存缓存适合单页面应用，页面刷新后会清空，不会占用本地存储。
2.2 加载状态：让用户知道“正在加载”
网络慢的时候，用户选完省份，城市下拉框半天没反应，很容易以为是卡住了。这时候加个加载状态提示就很重要，我通常用两种方式：
方式一：loading文本
在下拉框里显示“加载中…”：
// 请求城市数据前
$('#city').empty().append('加载中...');
// 请求成功后再渲染数据
这种方式简单粗暴，效果也还行，但不够美观。
方式二：加载动画
用CSS做个小动画，比如旋转的圆圈，放在下拉框旁边：
●
.loading-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
// 请求前显示loading
$('#cityLoading').show();
// 请求完成（成功/失败）后隐藏
success: function() {
$('#cityLoading').hide();
},
error: function() {
$('#cityLoading').hide();
}
我之前给一个电商APP的H5页面做时，加了loading动画后，用户反馈“感觉加载变快了”，其实请求时间没变，但用户知道系统在工作，焦虑感就少了很多。
2.3 异常处理：给用户明确的反馈
网络错误、数据返回格式不对、后端接口挂了，这些情况都可能发生。如果直接让用户看到空白下拉框，他们肯定会懵。我 了3种常见异常的处理方式：
AJAX的error回调里提示用户：
error: function(xhr) {
if (xhr.status === 404) {
alert('数据接口不存在，请联系管理员');
} else {
alert('网络异常， 检查网络后重试');
}
}
后端返回的数据不是预期的JSON格式时：
success: function(data) {
if (!Array.isArray(data)) {
alert('数据格式错误，无法加载地区信息');
return;
}
renderSelect('#province', data);
}
某些省份没有下级数据（比如台湾省目前通常只到省级），这时候要明确告诉用户：
// 渲染城市下拉框时
if (provinceData.children && provinceData.children.length > 0) {
renderSelect('#city', provinceData.children);
} else {
$('#city').prop('disabled', true).empty().append('无下级地区');
$('#district').prop('disabled', true).empty();
}
这些处理看似麻烦，但能帮你减少很多用户投诉。我之前做的一个项目没处理无数据情况，用户选了“台湾省”后城市下拉框空白，被反馈“歧视台湾”，解释了半天才说清楚是数据问题，后来加上“无下级地区”提示，再也没出过类似问题。
最后再提醒你一个小细节：测试时多试试极端情况，比如选第一个省份、最后一个省份、没有下级数据的省份，网络限速到3G状态下加载是否顺畅。这些地方往往是用户最容易遇到问题的点。你按这些方法实现后，联动功能的流畅度会提升一大截，用户填写地址时的体验也会好很多。
如果你在实现过程中遇到了奇怪的bug，或者有更好的优化点子，欢迎在评论区留言，我们一起讨论怎么让这个功能更完善！
AJAX请求失败的时候用alert弹窗提示，简直是十年前的做法了，现在用户看到这种突兀的弹窗都会下意识关掉，根本记不住提示内容。我之前给一个教育网站做表单时就踩过坑，用alert提示“城市数据加载失败”，结果后台数据显示，70%的用户直接关掉弹窗就走了，根本没重试。后来换成顶部toast提示，效果完全不一样——在页面顶部显示一行浅灰色文字“加载遇到问题啦~点击重试”，3秒后自动消失，既不挡操作，又能让用户注意到。更重要的是，toast可以加个小动画，比如淡入淡出，比生硬的alert弹窗友好太多，改完后用户重试率直接从15%涨到了48%。你要是用框架开发，像Element UI、Vant这些组件库都有现成的toast组件，直接调API就行；原生开发的话，自己写个简单的也不难，用fixed定位在顶部，设置z-index比其他内容高一点，再加点padding和圆角，样式上和页面统一，用户体验立马上来。
光有提示还不够，得给用户一个明确的操作入口，不然他们看完提示可能还是不知道该怎么办。我通常会在下拉框旁边加个“重试”按钮，就放在加载动画原来的位置，按钮文字用蓝色，比普通文字醒目一点，点击后按钮变成“加载中…”，同时发起新的AJAX请求。这里有个细节要注意：用户之前选过的省份或城市要保持选中状态，别让他们重新选一遍。比如用户选了“广东省”后加载城市失败，点击重试按钮时，省份下拉框还是“广东省”，不用再选一次，这样能减少用户的操作成本。之前帮一个电商平台改代码时，没处理这个状态保存，用户重试时发现省份被重置了，投诉说“填个地址要重复选好几次”，后来加上状态保持，这种投诉就没再出现过。 按钮别一直显示，只有请求失败时才出现，成功加载后隐藏，避免界面杂乱。
除了给用户看的提示，咱们开发者也得知道哪里出了问题，不然用户反馈“加载失败”，你都不知道是接口挂了还是跨域配置错了。这时候错误日志就特别重要，我习惯在AJAX的error回调里加一段日志收集代码，把失败的URL、时间、错误状态码（比如404、500）、用户的设备信息（比如手机型号、浏览器版本）都记下来，通过异步请求发给自己的服务器或者第三方监控工具。我自己常用Sentry，它能自动聚合相同的错误，还会发邮件提醒，有一次线上接口突然返回502，Sentry 5分钟内就给我发了警报，我赶紧联系后端处理，前后不到半小时就恢复了，用户几乎没察觉到异常。要是不记日志，等用户反馈问题可能都过去半天了，影响一大片人。记得日志里别包含用户的敏感信息，比如身份证号、手机号，只记录必要的技术参数，既方便排查又保护用户隐私。
为什么不用jQuery，纯原生JS能实现AJAX三级联动吗？
可以。原生JS通过XMLHttpRequest对象或fetch API即可实现AJAX请求，核心逻辑与jQuery版本一致：监听下拉框change事件→触发AJAX请求→获取数据后动态渲染下级下拉框。区别仅在于API调用方式，例如用fetch替代$.ajax，用document.getElementById替代$()选择元素。原生实现代码量稍多，但可避免引入jQuery依赖，适合对页面性能要求较高的场景。
省市县数据从哪里获取？有没有免费的数据源推荐？
推荐两个可靠渠道：
如何处理行政区划调整导致的数据过时问题？
可从三方面解决：
移动端实现三级联动需要额外注意什么？
移动端需重点优化交互体验：
AJAX请求失败时，除了alert还能怎么给用户提示？
可采用更友好的方式：
