Ajax实现省市县三级联动下拉菜单教程

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三级联动方案就构建完成了。这套代码结构清晰，分层明确，你可以直接应用到项目中，也可以根据实际需求，替换其中的数据持久化框架或前端库。希望这个详细的实现过程能为你带来启发和帮助。