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