当前位置：Gxlcms > AJAX > Ajax实现省市区三级级联(数据来自mysql数据库)

Ajax实现省市区三级级联(数据来自mysql数据库)

时间：2021-07-01 10:21:17 帮助过：45人阅读

实现Ajax实现省市区三级级联，需要Java解析json技术
整体Demo下载地址如下: 点我下载

address.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7.  <script type="text/javascript">
  8.   /** 
  9.    * 得到XMLHttpRequest对象 
  10.    */
  11.   function getajaxHttp() {
  12.    var xmlHttp;
  13.    try {
  14.     // Firefox, Opera 8.0+, Safari 
  15.     xmlHttp = new XMLHttpRequest();
  16.    } catch (e) {
  17.     // Internet Explorer 
  18.     try {
  19.      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  20.     } catch (e) {
  21.      try {
  22.       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  23.      } catch (e) {
  24.       alert("您的浏览器不支持AJAX！");
  25.       return false;
  26.      }
  27.     }
  28.    }
  29.    return xmlHttp;
  30.   }
  31.   /** 
  32.    * 发送ajax请求 
  33.    * url--请求到服务器的URL 
  34.    * methodtype(post/get) 
  35.    * con (true(异步)|false(同步)) 
  36.    * functionName(回调方法名，不需要引号,这里只有成功的时候才调用) 
  37.    * (注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象) 
  38.    */
  39.   function ajaxrequest(url, methodtype, con, functionName) {
  40.    //获取XMLHTTPRequest对象
  41.    var xmlhttp = getajaxHttp();
  42.    //设置回调函数（响应的时候调用的函数）
  43.    xmlhttp.onreadystatechange = function() {
  44.     //这个函数中的代码在什么时候被XMLHTTPRequest对象调用？
  45.     //当服务器响应时，XMLHTTPRequest对象会自动调用该回调方法
  46.     if (xmlhttp.readyState == 4) {
  47.      if (xmlhttp.status == 200) {
  48.       functionName(xmlhttp.responseText);
  49.      }
  50.     }
  51.    };
  52.    //创建请求
  53.    xmlhttp.open(methodtype, url, con);
  54.    //发送请求
  55.    xmlhttp.send();
  56.   }
  57.   window.onload=function(){
  58.    ajaxrequest("addressSerlvet?method=provincial","POST",true,addrResponse);
  59.   }
  60.   //动态获取省的信息
  61.   function addrResponse(responseContents){
  62.    var jsonObj = new Function("return" + responseContents)();
  63.    for(var i = 0; i < jsonObj.addrList.length;i++){
  64.     document.getElementById('select').innerHTML += 
  65.      "<option value='"+jsonObj.addrList[i].id+"'>"
  66.       +jsonObj.addrList[i].address+
  67.      "</option>"
  68.    }
  69.   }
  70.   //选中省后
  71.   function pChange(){
  72.    //先将市的之前的信息清除
  73.    document.getElementById('selectCity').innerHTML="<option value='-1'>请选择市</option>";
  74.    //再将区的信息清除
  75.    document.getElementById('selectArea').innerHTML="<option value='-1'>请选择区</option>";
  76.    //再将用户的输入清楚
  77.    document.getElementById("addr").innerHTML="";
  78.    var val = document.getElementById('select').value;
  79.    if(val == -1){
  80.     document.getElementById('selectCity')[0].selected = true;
  81.     return;
  82.    }
  83.    //开始执行获取市
  84.    ajaxrequest("addressSerlvet?method=city&provincial="+val,"POST",true,cityResponse);
  85.   }
  86.   //获取市的动态数据
  87.   function cityResponse(responseContents){
  88.    var jsonObj = new Function("return" + responseContents)();
  89.    for(var i = 0; i < jsonObj.cityList.length;i++){
  90.     document.getElementById('selectCity').innerHTML += 
  91.      "<option value='"+jsonObj.cityList[i].id+"'>"
  92.       +jsonObj.cityList[i].address+
  93.      "</option>"
  94.    }
  95.   }
  96.   //选中市以后
  97.   function cChange(){
  98.    var val = document.getElementById('selectCity').value;
  99.    //开始执行获取区
  100.    ajaxrequest("addressSerlvet?method=area&cityId="+val,"POST",true,areaResponse);
  101.   }
  102.   //获取区的动态数据
  103.   function areaResponse(responseContents){
  104.    var jsonObj = new Function("return" + responseContents)();
  105.    for(var i = 0; i < jsonObj.areaList.length;i++){
  106.     document.getElementById('selectArea').innerHTML += 
  107.      "<option value='"+jsonObj.areaList[i].id+"'>"
  108.       +jsonObj.areaList[i].address+
  109.      "</option>"
  110.    }
  111.   }
  112.   //点击提交按钮
  113.   function confirM(){
  114.    //获取省的文本值
  115.    var p = document.getElementById("select");
  116.    var pTex = p.options[p.options.selectedIndex].text;
  117.    if(p.value=-1){
  118.     alert("请选择省");
  119.     return;
  120.    }
  121.    //获取市的文本值
  122.    var city = document.getElementById("selectCity");
  123.    var cityTex = city.options[city.options.selectedIndex].text;
  124.    if(city.value=-1){
  125.     alert("请选择市");
  126.     return;
  127.    }
  128.    //获取区的文本值
  129.    var area = document.getElementById("selectArea");
  130.    var areaTex = area.options[area.options.selectedIndex].text;
  131.    if(area.value=-1){
  132.     alert("请选择区");
  133.     return;
  134.    }
  135.    //获取具体位置id文本值
  136.    var addr = document.getElementById("addr").value;
  137.    //打印
  138.    document.getElementById("show").innerHTML = "您选择的地址为 " + pTex + " " + cityTex + " " + areaTex + " " + addr;
  139.   }
  140.  </script>
  141. <body>
  142.  <select id="select" onchange="pChange()">
  143.   <option value="-1">请选择省</option>
  144.  </select>
  145.  <select id="selectCity" onchange="cChange()">
  146.   <option value='-1'>请选择市</option>
  147.  </select>
  148.  <select id="selectArea" onchange="aChange()">
  149.   <option value='-1'>请选择市</option>
  150.  </select>
  151.  <input type="text" id="addr" />
  152.  <button onclick="confirM();">确定</button>
  153.  <div id="show"></div>
  154. </body>
  155. </html>

AddressServlet.java

  1. package cn.bestchance.servlet;
  2. import java.io.IOException;
  3. import java.util.ArrayList;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.annotation.WebServlet;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9. import cn.bestchance.dao.AddressDao;
  10. import cn.bestchance.dao.impl.AddressDaoImpl;
  11. import cn.bestchance.entity.Address;
  12. import net.sf.json.JSONArray;
  13. import net.sf.json.JSONObject;
  14. @WebServlet("/addressSerlvet")
  15. public class AddressSerlvet extends HttpServlet {
  16.  private static final long serialVersionUID = 1L;
  17.  private AddressDao dao = new AddressDaoImpl();
  18.  protected void doGet(HttpServletRequest request,
  19.    HttpServletResponse response) throws ServletException, IOException {
  20.   doPost(request, response);
  21.  }
  22.  /**
  23.   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  24.   *  response)
  25.   */
  26.  protected void doPost(HttpServletRequest request,
  27.    HttpServletResponse response) throws ServletException, IOException {
  28.   response.setCharacterEncoding("utf-8");
  29.   response.setContentType("text/html;charset=utf-8");
  30.   String method=request.getParameter("method");
  31.   if("provincial".equals(method)){
  32.    getProvincial(request, response);
  33.   }
  34.   if("city".equals(method)){
  35.    getCity(request, response);
  36.   }
  37.   if("area".equals(method)){
  38.    getArea(request, response);
  39.   }
  40.  }
  41.  /**
  42.   * 根据市id获取该市下的区的全部信息
  43.   * @param request
  44.   * @param response
  45.   * @throws ServletException
  46.   * @throws IOException
  47.   */
  48.  protected void getArea(HttpServletRequest request,
  49.    HttpServletResponse response) throws ServletException, IOException {
  50.   String cityId = request.getParameter("cityId");
  51.   // 从数据库中查询省的信息
  52.   ArrayList<Address> areaList = dao.getAreaByCityId(Integer.parseInt(cityId));
  53.   // 将集合转成json字符串
  54.   JSONObject jsonObj = new JSONObject();
  55.   JSONArray jsonArray = JSONArray.fromObject(areaList);
  56.   jsonObj.put("areaList", jsonArray);
  57.   String jsonDataStr = jsonObj.toString();
  58.   response.getWriter().print(jsonDataStr);
  59.  }
  60.  /**
  61.   * 获取省的信息 并相应
  62.   * @param request
  63.   * @param response
  64.   * @throws ServletException
  65.   * @throws IOException
  66.   */
  67.  protected void getProvincial(HttpServletRequest request,
  68.    HttpServletResponse response) throws ServletException, IOException {
  69.   // 从数据库中查询省的信息
  70.   ArrayList<Address> addrList = dao.getProvince();
  71.   // 将集合转成json字符串
  72.   JSONObject jsonObj = new JSONObject();
  73.   JSONArray jsonArray = JSONArray.fromObject(addrList);
  74.   jsonObj.put("addrList", jsonArray);
  75.   String jsonDataStr = jsonObj.toString();
  76.   response.getWriter().print(jsonDataStr);
  77.  }
  78.  /**
  79.   * 获取市的信息并相应
  80.   * @param request
  81.   * @param response
  82.   * @throws ServletException
  83.   * @throws IOException
  84.   */
  85.  protected void getCity(HttpServletRequest request,
  86.    HttpServletResponse response) throws ServletException, IOException {
  87.   String provinceId = request.getParameter("provincial");
  88.   // 从数据库中查询省的信息
  89.   ArrayList<Address> addrList = dao.getCityByProvinceId(Integer.parseInt(provinceId));
  90.   // 将集合转成json字符串
  91.   JSONObject jsonObj = new JSONObject();
  92.   JSONArray jsonArray = JSONArray.fromObject(addrList);
  93.   jsonObj.put("cityList", jsonArray);
  94.   String jsonDataStr = jsonObj.toString();
  95.   response.getWriter().print(jsonDataStr);
  96.  }
  97. }

AddressDao.java

  1. package cn.bestchance.dao;
  2. import java.util.ArrayList;
  3. import cn.bestchance.entity.Address;
  4. public interface AddressDao {
  5.  /**
  6.   * 获取省的id和名称
  7.   * @return
  8.   */
  9.  ArrayList<Address> getProvince();
  10.  /**
  11.   * 根据省的id获取市的信息
  12.   * @param provinceId
  13.   * @return
  14.   */
  15.  ArrayList<Address> getCityByProvinceId(int provinceId);
  16.  /**
  17.   * 根据市的id获取区的信息
  18.   * @param cityId
  19.   * @return
  20.   */
  21.  ArrayList<Address> getAreaByCityId(int cityId);
  22. }

AddressDaoImpl.java

  1. package cn.bestchance.dao.impl;
  2. import java.sql.ResultSet;
  3. import java.sql.SQLException;
  4. import java.util.ArrayList;
  5. import cn.bestchance.dao.AddressDao;
  6. import cn.bestchance.entity.Address;
  7. import cn.bestchance.util.DBUtil;
  8. public class AddressDaoImpl implements AddressDao {
  9.  private DBUtil db = new DBUtil();
  10.  @Override
  11.  public ArrayList<Address> getProvince() {
  12.   ArrayList<Address> addrList = new ArrayList<Address>();
  13.   db.openConnection();
  14.   String sql = "select * from province";
  15.   ResultSet rs = db.excuteQuery(sql);
  16.   try {
  17.    while(rs.next()){
  18.     Address addr = new Address();
  19.     addr.setId(rs.getInt(2));
  20.     addr.setAddress(rs.getString(3));
  21.     addrList.add(addr);
  22.    }
  23.   } catch (SQLException e) {
  24.    // TODO Auto-generated catch block
  25.    e.printStackTrace();
  26.   }finally{
  27.    if(rs != null){
  28.     try {
  29.      rs.close();
  30.     } catch (SQLException e) {
  31.      // TODO Auto-generated catch block
  32.      e.printStackTrace();
  33.     }
  34.    }
  35.    db.closeResoure();
  36.   }
  37.   return addrList;
  38.  }
  39.  @Override
  40.  public ArrayList<Address> getCityByProvinceId(int provinceId) {
  41.   ArrayList<Address> addrList = new ArrayList<Address>();
  42.   db.openConnection();
  43.   String sql = "select * from city where fatherID = " + provinceId; //431200
  44.   ResultSet rs = db.excuteQuery(sql);
  45.   try {
  46.    while(rs.next()){
  47.     Address addr = new Address();
  48.     addr.setId(rs.getInt(2));
  49.     addr.setAddress(rs.getString(3));
  50.     addrList.add(addr);
  51.    }
  52.   } catch (SQLException e) {
  53.    // TODO Auto-generated catch block
  54.    e.printStackTrace();
  55.   }finally{
  56.    if(rs != null){
  57.     try {
  58.      rs.close();
  59.     } catch (SQLException e) {
  60.      // TODO Auto-generated catch block
  61.      e.printStackTrace();
  62.     }
  63.    }
  64.    db.closeResoure();
  65.   }
  66.   return addrList;
  67.  }
  68.  @Override
  69.  public ArrayList<Address> getAreaByCityId(int cityId) {
  70.   ArrayList<Address> addrList = new ArrayList<Address>();
  71.   db.openConnection();
  72.   String sql = "select * from area where fatherID = " + cityId; //431200
  73.   ResultSet rs = db.excuteQuery(sql);
  74.   try {
  75.    while(rs.next()){
  76.     Address addr = new Address();
  77.     addr.setId(rs.getInt(2));
  78.     addr.setAddress(rs.getString(3));
  79.     addrList.add(addr);
  80.    }
  81.   } catch (SQLException e) {
  82.    // TODO Auto-generated catch block
  83.    e.printStackTrace();
  84.   }finally{
  85.    if(rs != null){
  86.     try {
  87.      rs.close();
  88.     } catch (SQLException e) {
  89.      // TODO Auto-generated catch block
  90.      e.printStackTrace();
  91.     }
  92.    }
  93.    db.closeResoure();
  94.   }
  95.   return addrList;
  96.  }
  97. }

实体类Address.java

  1. package cn.bestchance.entity;
  2. public class Address {
  3.  @Override
  4.  public String toString() {
  5.   return "Address [id=" + id + ", address=" + address + "]";
  6.  }
  7.  private int id;
  8.  private String address;
  9.  public int getId() {
  10.   return id;
  11.  }
  12.  public void setId(int id) {
  13.   this.id = id;
  14.  }
  15.  public String getAddress() {
  16.   return address;
  17.  }
  18.  public void setAddress(String address) {
  19.   this.address = address;
  20.  }
  21.  public Address() {
  22.   super();
  23.   // TODO Auto-generated constructor stub
  24.  }
  25.  public Address(int id, String address) {
  26.   super();
  27.   this.id = id;
  28.   this.address = address;
  29.  }
  30. }

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！