经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » AJAX » 查看文章
Ajax实现省市县三级联动
来源：jb51　　时间：2021/3/8 11:18:28　　对本文有异议

本文实例为大家分享了Ajax实现省市县三级联动的具体代码，供大家参考，具体内容如下

首先建立数据库，如下所示

接口

省

  1. import java.util.List;
  2. public interface ProvinceDao {
  3.  List<Province> findAll();
  4. }

市

  1. import java.util.List;
  2. public interface CityDao {
  3.  List<City> findCityByPid(int pid);
  4. }

县

  1. import java.util.List;
  2. public interface AreaDao {
  3.  List<Area> findAreaByCid(int cid);
  4. }

接口实现类

省

  1. import java.sql.Connection;
  2. import java.sql.PreparedStatement;
  3. import java.sql.ResultSet;
  4. import java.sql.SQLException;
  5. import java.util.ArrayList;
  6. import java.util.List;
  7.  
  8. public class ProvinceDaoImpl implements ProvinceDao{
  9.  public List<Province> findAll(){
  10.  Connection conn = DBHelper.getConn();
  11.  ArrayList<Province> provinces = new ArrayList<Province>();
  12.  String sql = "select * from aprovince";
  13.  try {
  14.  PreparedStatement ps = conn.prepareStatement(sql);
  15.  ResultSet rs = ps.executeQuery();
  16.  while (rs.next()){
  17.  Province p = new Province();
  18.  p.setPid(rs.getInt(1));
  19.  p.setPname(rs.getString(2));
  20.  provinces.add(p);
  21.  }
  22.  } catch (SQLException e) {
  23.  e.printStackTrace();
  24.  }
  25.  return provinces;
  26.  }
  27. }

市

  1. import java.sql.Connection;
  2. import java.sql.PreparedStatement;
  3. import java.sql.ResultSet;
  4. import java.sql.SQLException;
  5. import java.util.ArrayList;
  6. import java.util.List;
  7.  
  8. public class CityDaoImpl implements CityDao {
  9.  @Override
  10.  public List<City> findCityByPid(int pid) {
  11.  Connection conn = DBHelper.getConn();
  12.  
  13.  ArrayList<City> cities = new ArrayList<>();
  14.  
  15.  String sql = "select * from acity where pid=?";
  16.  
  17.  try {
  18.  PreparedStatement ps = conn.prepareStatement(sql);
  19.  ps.setInt(1,pid);
  20.  ResultSet rs = ps.executeQuery();
  21.  while (rs.next()){
  22.  City city = new City();
  23.  city.setPid(rs.getInt(3));
  24.  city.setCid(rs.getInt(1));
  25.  city.setCname(rs.getString(2));
  26.  cities.add(city);
  27.  }
  28.  } catch (SQLException e) {
  29.  e.printStackTrace();
  30.  }
  31.  return cities;
  32.  }
  33. }

县

  1. import java.sql.Connection;
  2. import java.sql.PreparedStatement;
  3. import java.sql.ResultSet;
  4. import java.sql.SQLException;
  5. import java.util.ArrayList;
  6. import java.util.List;
  7.  
  8. public class AreaDaoImpl implements AreaDao {
  9.  @Override
  10.  public List<Area> findAreaByCid(int cid) {
  11.  Connection conn = DBHelper.getConn();
  12.  ArrayList<Area> areas = new ArrayList<>();
  13.  String sql = "select * from aarea where cid=?";
  14.  
  15.  try {
  16.  PreparedStatement ps = conn.prepareStatement(sql);
  17.  ps.setInt(1,cid);
  18.  ResultSet rs = ps.executeQuery();
  19.  while (rs.next()){
  20.  Area area = new Area();
  21.  area.setCid(rs.getInt(3));
  22.  area.setAid(rs.getInt(1));
  23.  area.setAname(rs.getString(2));
  24.  areas.add(area);
  25.  }
  26.  } catch (SQLException e) {
  27.  e.printStackTrace();
  28.  }
  29.  return areas;
  30.  }
  31. }

servlet

省

  1. package cn.zhc.servlet;
  2.  
  3. import cn.zhc.dao.Impl.ProvinceDaoImpl;
  4. import cn.zhc.dao.ProvinceDao;
  5. import cn.zhc.domin.Province;
  6. import com.alibaba.fastjson.JSONObject;
  7.  
  8. import javax.servlet.ServletException;
  9. import javax.servlet.annotation.WebServlet;
  10. import javax.servlet.http.HttpServlet;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13. import java.io.IOException;
  14. import java.util.List;
  15.  
  16. @WebServlet("/findAll")
  17. public class FindAll extends HttpServlet {
  18.  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  19.  request.setCharacterEncoding("utf-8");
  20.  response.setContentType("text/html;charset=utf-8");
  21.  
  22.  ProvinceDao provinceDao = new ProvinceDaoImpl();
  23.  List<Province> lists=provinceDao.findAll();
  24.  
  25.  response.getWriter().write(JSONObject.toJSONString(lists));
  26.  }
  27.  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  28.  this.doPost(request, response);
  29.  }
  30. }

市

  1. package cn.zhc.servlet;
  2.  
  3. import cn.zhc.dao.CityDao;
  4. import cn.zhc.dao.Impl.CityDaoImpl;
  5. import cn.zhc.domin.City;
  6. import com.alibaba.fastjson.JSONObject;
  7.  
  8. import javax.servlet.ServletException;
  9. import javax.servlet.annotation.WebServlet;
  10. import javax.servlet.http.HttpServlet;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13. import java.io.IOException;
  14. import java.util.List;
  15.  
  16. @WebServlet("/findCityByPid")
  17. public class FindCityByPid extends HttpServlet {
  18.  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  19.  request.setCharacterEncoding("utf-8");
  20.  response.setContentType("text/html;charset=utf-8");
  21.  
  22.  String pid = request.getParameter("pid");
  23.  
  24.  CityDao cityDao = new CityDaoImpl();
  25.  List<City> cityList = cityDao.findCityByPid(Integer.parseInt(pid));
  26.  
  27.  response.getWriter().write(JSONObject.toJSONString(cityList));
  28.  }
  29.  
  30.  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  31.  this.doPost(request, response);
  32.  }
  33. }

县

  1. package cn.zhc.servlet;
  2.  
  3. import cn.zhc.dao.AreaDao;
  4. import cn.zhc.dao.Impl.AreaDaoImpl;
  5. import cn.zhc.domin.Area;
  6. import com.alibaba.fastjson.JSONObject;
  7.  
  8. import javax.servlet.ServletException;
  9. import javax.servlet.annotation.WebServlet;
  10. import javax.servlet.http.HttpServlet;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13. import java.io.IOException;
  14. import java.util.List;
  15.  
  16. @WebServlet("/findAreaByCid")
  17. public class FindAreaByCid extends HttpServlet {
  18.  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  19.  request.setCharacterEncoding("utf-8");
  20.  response.setContentType("text/html;charset=utf-8");
  21.  
  22.  String cid = request.getParameter("cid");
  23.  
  24.  AreaDao areaDao = new AreaDaoImpl();
  25.  List<Area> areas = areaDao.findAreaByCid(Integer.parseInt(cid));
  26.  
  27.  response.getWriter().write(JSONObject.toJSONString(areas));
  28.  }
  29.  
  30.  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  31.  this.doPost(request, response);
  32.  }
  33. }

JSP页面

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.  <title>三级联动</title>
  5.  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9.  $(function () {
  10.  $.ajax({
  11.  type:"get",
  12.  url:"findAll",
  13.  dataType:"json",
  14.  success:function (data) {
  15.  var obj=$("#province");
  16.  for(var i=0;i<data.length;i++){
  17.  var ob="<option value='"+data[i].pid+"'>"+data[i].pname+"</option>";
  18.  obj.append(ob);
  19.  }
  20.  }
  21.  })
  22.  
  23.  $("#province").change(function () {
  24.  $("#city option").remove();
  25.  $.ajax({
  26.  type:"get",
  27.  async:false,
  28.  url:"findCityByPid?pid="+$("#province").val(),
  29.  dataType:"json",
  30.  success:function (data) {
  31.  var obj=$("#city");
  32.  for(var i=0;i<data.length;i++){
  33.  var ob="<option value='"+data[i].cid+"'>"+data[i].cname+"</option>";
  34.  obj.append(ob);
  35.  }
  36.  }
  37.  })
  38.  });
  39.  
  40.  $("#city,#province").change(function () {
  41.  $("#area option").remove();
  42.  $.ajax({
  43.  type:"get",
  44.  async:false,
  45.  url:"findAreaByCid?cid="+$("#city").val(),
  46.  dataType:"json",
  47.  success:function (data) {
  48.  var obj=$("#area");
  49.  for(var i=0;i<data.length;i++){
  50.  var ob="<option value='"+data[i].aid+"'>"+data[i].aname+"</option>";
  51.  obj.append(ob);
  52.  }
  53.  }
  54.  })
  55.  });
  56.  });
  57. </script>
  58. <select name="province" id="province">
  59.  <option value="0">请选择</option>
  60. </select>省
  61. <select name="city" id="city">
  62.  <option value="0">请选择</option>
  63. </select>市
  64. <select name="area" id="area">
  65.  <option value="0">请选择</option>
  66. </select>县
  67. </body>
  68. </html>

实现结果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

AJAX热门文章

  • ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器
  • PHP使用ajax的post方式下载excel文件简单示例
  • 解决Shiro 处理ajax请求拦截登录超时的问题
  • PHP+iframe模拟Ajax上传文件功能示例
  • Ajax返回值类型与用法实例分析
  • Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递
  • Ajax提交post请求案例分析
  • php ajax confirm 删除实例详解
  • 爬取今日头条Ajax请求
  • Ajax原理与应用案例快速入门教程

    • AJAX推荐文章

  • 前后端分离之Ajax入门
  • ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器
  • Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递
  • AJAX请求以及解决跨域问题详解
  • Ajax实现省市县三级联动
  • jQuery ajax仿Google自动提示SearchSuggess功能示例

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号