Ajax实现省市县三级联动具体代码分享

今天，咱们来深度拆解一个非常实用的前端交互案例：如何使用Ajax技术，配合后端Ja va服务，实现一个完整的省市县三级联动功能。这个功能在各类表单、地址选择场景中应用广泛，掌握其实现思路和代码细节，对提升开发效率很有帮助。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

话不多说，先从数据库设计开始。要支撑三级联动，我们至少需要三张表来分别存储省、市、县（区）的数据，表结构清晰明了是关键。

数据访问层：接口与实现

后端的核心任务是提供数据接口。遵循分层设计，我们先定义数据访问接口。

省级数据接口

import ja va.util.List;
public interface ProvinceDao {
 List findAll();
}

市级数据接口

import ja va.util.List;
public interface CityDao {
 List findCityByPid(int pid);
}

县级数据接口

import ja va.util.List;
public interface AreaDao {
 List findAreaByCid(int cid);
}

接口定义好了，接下来看具体实现。实现类的逻辑其实很典型：建立数据库连接，执行SQL查询，将结果集映射到对象列表并返回。这里以JDBC为例，实际开发中可根据需要替换为MyBatis等框架。

省级接口实现类

import ja va.sql.Connection;
import ja va.sql.PreparedStatement;
import ja va.sql.ResultSet;
import ja va.sql.SQLException;
import ja va.util.ArrayList;
import ja va.util.List;
public class ProvinceDaoImpl implements ProvinceDao{
 public List findAll(){
 Connection conn = DBHelper.getConn();
 ArrayList provinces = new ArrayList();
 String sql = "select * from aprovince";
 try {
 PreparedStatement ps = conn.prepareStatement(sql);
 ResultSet rs = ps.executeQuery();
 while (rs.next()){
 Province p = new Province();
 p.setPid(rs.getInt(1));
 p.setPname(rs.getString(2));
 provinces.add(p);
 }
 } catch (SQLException e) {
 e.printStackTrace();
 }
 return provinces;
 }}

市级接口实现类

import ja va.sql.Connection;
import ja va.sql.PreparedStatement;
import ja va.sql.ResultSet;
import ja va.sql.SQLException;
import ja va.util.ArrayList;
import ja va.util.List;
public class CityDaoImpl implements CityDao {
 @Override
 public List findCityByPid(int pid) {
 Connection conn = DBHelper.getConn();
 ArrayList cities = new ArrayList<>();
 String sql = "select * from acity where pid=?";
 try {
 PreparedStatement ps = conn.prepareStatement(sql);
 ps.setInt(1,pid);
 ResultSet rs = ps.executeQuery();
 while (rs.next()){
 City city = new City();
 city.setPid(rs.getInt(3));
 city.setCid(rs.getInt(1));
 city.setCname(rs.getString(2));
 cities.add(city);
 }
 } catch (SQLException e) {
 e.printStackTrace();
 }
 return cities;
 }}

县级接口实现类

import ja va.sql.Connection;
import ja va.sql.PreparedStatement;
import ja va.sql.ResultSet;
import ja va.sql.SQLException;
import ja va.util.ArrayList;
import ja va.util.List;
public class AreaDaoImpl implements AreaDao {
 @Override
 public List findAreaByCid(int cid) {
 Connection conn = DBHelper.getConn();
 ArrayList areas = new ArrayList<>();
 String sql = "select * from aarea where cid=?";
 try {
 PreparedStatement ps = conn.prepareStatement(sql);
 ps.setInt(1,cid);
 ResultSet rs = ps.executeQuery();
 while (rs.next()){
 Area area = new Area();
 area.setCid(rs.getInt(3));
 area.setAid(rs.getInt(1));
 area.setAname(rs.getString(2));
 areas.add(area);
 }
 } catch (SQLException e) {
 e.printStackTrace();
 }
 return areas;
 }}

业务控制层：Servlet编写

数据层准备就绪，我们需要通过Servlet来提供Web接口。这三个Servlet的作用非常明确：接收前端请求，调用对应的Dao层方法获取数据，并将结果转换为JSON格式返回给前端。

获取所有省份的Servlet

package cn.zhc.servlet;
import cn.zhc.dao.Impl.ProvinceDaoImpl;
import cn.zhc.dao.ProvinceDao;
import cn.zhc.domin.Province;
import com.alibaba.fastjson.JSONObject;
import ja vax.servlet.ServletException;
import ja vax.servlet.annotation.WebServlet;
import ja vax.servlet.http.HttpServlet;
import ja vax.servlet.http.HttpServletRequest;
import ja vax.servlet.http.HttpServletResponse;
import ja va.io.IOException;
import ja va.util.List;
@WebServlet("/findAll")
public class FindAll extends HttpServlet {
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 request.setCharacterEncoding("utf-8");
 response.setContentType("text/html;charset=utf-8");
 ProvinceDao provinceDao = new ProvinceDaoImpl();
 List lists=provinceDao.findAll();
 response.getWriter().write(JSONObject.toJSONString(lists));
 }
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 this.doPost(request, response);
 }}

根据省份ID获取城市的Servlet

package cn.zhc.servlet;
import cn.zhc.dao.CityDao;
import cn.zhc.dao.Impl.CityDaoImpl;
import cn.zhc.domin.City;
import com.alibaba.fastjson.JSONObject;
import ja vax.servlet.ServletException;
import ja vax.servlet.annotation.WebServlet;
import ja vax.servlet.http.HttpServlet;
import ja vax.servlet.http.HttpServletRequest;
import ja vax.servlet.http.HttpServletResponse;
import ja va.io.IOException;
import ja va.util.List;
@WebServlet("/findCityByPid")
public class FindCityByPid extends HttpServlet {
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 request.setCharacterEncoding("utf-8");
 response.setContentType("text/html;charset=utf-8");
 String pid = request.getParameter("pid");
 CityDao cityDao = new CityDaoImpl();
 List cityList = cityDao.findCityByPid(Integer.parseInt(pid));
 response.getWriter().write(JSONObject.toJSONString(cityList));
 }
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 this.doPost(request, response);
 }}

根据城市ID获取区县的Servlet

package cn.zhc.servlet;
import cn.zhc.dao.AreaDao;
import cn.zhc.dao.Impl.AreaDaoImpl;
import cn.zhc.domin.Area;
import com.alibaba.fastjson.JSONObject;
import ja vax.servlet.ServletException;
import ja vax.servlet.annotation.WebServlet;
import ja vax.servlet.http.HttpServlet;
import ja vax.servlet.http.HttpServletRequest;
import ja vax.servlet.http.HttpServletResponse;
import ja va.io.IOException;
import ja va.util.List;
@WebServlet("/findAreaByCid")
public class FindAreaByCid extends HttpServlet {
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 request.setCharacterEncoding("utf-8");
 response.setContentType("text/html;charset=utf-8");
 String cid = request.getParameter("cid");
 AreaDao areaDao = new AreaDaoImpl();
 List areas = areaDao.findAreaByCid(Integer.parseInt(cid));
 response.getWriter().write(JSONObject.toJSONString(areas));
 }
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 this.doPost(request, response);
 }}

前端交互：JSP与Ajax联动

后端接口全部打通后，前端的任务就是通过Ajax动态获取数据并更新下拉框。这里的逻辑链条非常清晰：页面加载时获取所有省份；省份改变时，获取其下的城市；城市改变时，获取其下的区县。

<%@ page contentType="text/html;charset=UTF-8" language="ja va" %>


 
 




 请选择
省

 请选择
市

 请选择
县

最终，一个流畅的三级联动效果就实现了。用户选择省份后，城市下拉框动态更新；选择城市后，区县下拉框也随之更新，整个过程无需刷新页面，体验非常顺滑。

至此，从数据库设计、后端接口到前端交互，一个完整的Ajax三级联动方案就构建完成了。这套代码结构清晰，分层明确，你可以直接应用到项目中，也可以根据实际需求，替换其中的数据持久化框架或前端库。希望这个详细的实现过程能为你带来启发和帮助。

热门推荐

电脑教程

安全用电指南正确连接集线器电源的方法

集线器插电源必须严格遵循“先断电、再接线、后上电”的安全闭环流程 这可不是什么多余的步骤，而是电气工程领域的硬性规定。其依据清清楚楚地写在IEEE 802 3以太网标准和各大主流设备厂商的技术文档里。具体来说，如果给集线器带电插拔RJ45网线，虽然不一定立刻“冒烟”，但极有可能冲击到PHY芯片，造成

热心网友

05.07

编程语言

C++实现图的拓扑排序Kahn算法详解与BFS核心源码解析

拓扑排序失败是算法实现中常见的问题。代码逻辑看似正确，但运行时可能陷入停滞或输出序列不完整，无法得到有效的拓扑顺序。这通常是由于图中存在环路依赖，导致算法无法找到入度为零的起始节点，从而使整个排序流程中断。 具体是哪些环节容易导致拓扑排序失败呢？我们来逐一分析排查。 为什么拓扑排序失败？先检查入度数

热心网友

05.07

web3.0

2026年比特币减半倒计时：半价门票与投资须知全揭秘

旧金山的秋天，向来是科技行业思潮涌动的季节。而今年10月13日至15日，这座城市将再次成为全球创新者的焦点——比特币世界碘伏大会2026即将在莫斯科尼西馆拉开帷幕。这场盛会不仅是前沿技术的风向标，更是连接顶尖创始人、投资者与科技领袖的关键网络节点。 大会亮点和主题 作为年度科技盛事，比特币世界碘伏大

热心网友

05.07

编程语言

Sublime Text 4同步配置教程 如何安装Sync Settings插件

想在 Sublime Text 4 里用上 Sync Settings 同步你的配置？这事儿能成，但得先跨过两道坎：插件版本得是 v3 0 或更高，同时你的 ST4 内核也得是比较新的版本。好消息是，2026 年主流发行版基本都达标了。很多朋友遇到的“装不上”、“菜单不出现”、“点了没反应”，十有八

热心网友

05.07

电脑教程

SATA硬盘连接主板必须按顺序接线吗

SATA硬盘连接主板：接口顺序真有讲究吗？ 给主板接SATA硬盘，这事儿本身其实挺自由的。从物理层面看，只要接口对得上，线也插稳了，你随机找个孔插进去，电脑基本都能认出来。不过话说回来，如果你想追求更高的开机效率、更清晰的维护思路，那在接口选择上还真得花点小心思。一个核心建议是：把安装操作系统的那块

热心网友

05.07