加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-16 01:29:45 所属栏目：百科 来源：网络整理
导读：实现该技术需要Java解析json技术 整体Demo下载地址如下: 点我下载 address.html !DOCTYPE html html head meta charset = "UTF-8" title Insert title here / title / head script type = "text/javascript" /** * 得到XMLHttpRequest对象 */ function getaj

实现该技术需要Java解析json技术
整体Demo下载地址如下: 点我下载

address.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

    <script type="text/javascript"> /** * 得到XMLHttpRequest对象 */ function getajaxHttp() { var xmlHttp; try { // Firefox,Opera 8.0+,Safari  xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer  try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX！"); return false; } } } return xmlHttp; } /** * 发送ajax请求 * url--请求到服务器的URL * methodtype(post/get) * con (true(异步)|false(同步)) * functionName(回调方法名，不需要引号,这里只有成功的时候才调用) * (注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象) */ function ajaxrequest(url,methodtype,con,functionName) { //获取XMLHTTPRequest对象 var xmlhttp = getajaxHttp(); //设置回调函数（响应的时候调用的函数） xmlhttp.onreadystatechange = function() { //这个函数中的代码在什么时候被XMLHTTPRequest对象调用？ //当服务器响应时，XMLHTTPRequest对象会自动调用该回调方法 if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { functionName(xmlhttp.responseText); } } }; //创建请求 xmlhttp.open(methodtype,url,con); //发送请求 xmlhttp.send(); } window.onload=function(){ ajaxrequest("addressSerlvet?method=provincial","POST",true,addrResponse); } //动态获取省的信息 function addrResponse(responseContents){ var jsonObj = new Function("return" + responseContents)(); for(var i = 0; i < jsonObj.addrList.length;i++){ document.getElementById('select').innerHTML += "<option value='"+jsonObj.addrList[i].id+"'>" +jsonObj.addrList[i].address+ "</option>" } } //选中省后 function pChange(){ //先将市的之前的信息清除 document.getElementById('selectCity').innerHTML="<option value='-1'>请选择市</option>"; //再将区的信息清除 document.getElementById('selectArea').innerHTML="<option value='-1'>请选择区</option>"; //再将用户的输入清楚 document.getElementById("addr").innerHTML=""; var val = document.getElementById('select').value; if(val == -1){ document.getElementById('selectCity')[0].selected = true; return; } //开始执行获取市 ajaxrequest("addressSerlvet?method=city&provincial="+val,cityResponse); } //获取市的动态数据 function cityResponse(responseContents){ var jsonObj = new Function("return" + responseContents)(); for(var i = 0; i < jsonObj.cityList.length;i++){ document.getElementById('selectCity').innerHTML += "<option value='"+jsonObj.cityList[i].id+"'>" +jsonObj.cityList[i].address+ "</option>" } } //选中市以后 function cChange(){ var val = document.getElementById('selectCity').value; //开始执行获取区 ajaxrequest("addressSerlvet?method=area&cityId="+val,areaResponse); } //获取区的动态数据 function areaResponse(responseContents){ var jsonObj = new Function("return" + responseContents)(); for(var i = 0; i < jsonObj.areaList.length;i++){ document.getElementById('selectArea').innerHTML += "<option value='"+jsonObj.areaList[i].id+"'>" +jsonObj.areaList[i].address+ "</option>" } } //点击提交按钮 function confirM(){ //获取省的文本值 var p = document.getElementById("select"); var pTex = p.options[p.options.selectedIndex].text; if(p.value=-1){ alert("请选择省"); return; } //获取市的文本值 var city = document.getElementById("selectCity"); var cityTex = city.options[city.options.selectedIndex].text; if(city.value=-1){ alert("请选择市"); return; } //获取区的文本值 var area = document.getElementById("selectArea"); var areaTex = area.options[area.options.selectedIndex].text; if(area.value=-1){ alert("请选择区"); return; } //获取具体位置id文本值 var addr = document.getElementById("addr").value; //打印 document.getElementById("show").innerHTML = "您选择的地址为 " + pTex + " " + cityTex + " " + areaTex + " " + addr; } </script>
<body>
    <select id="select" onchange="pChange()">
        <option value="-1">请选择省</option>
    </select>
    <select id="selectCity" onchange="cChange()">
        <option value='-1'>请选择市</option>
    </select>
    <select id="selectArea" onchange="aChange()">
        <option value='-1'>请选择市</option>
    </select>
    <input type="text" id="addr" />
    <button onclick="confirM();">确定</button>
    <div id="show"></div>
</body>
</html>

AddressServlet.java

package cn.bestchance.servlet;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.bestchance.dao.AddressDao;
import cn.bestchance.dao.impl.AddressDaoImpl;
import cn.bestchance.entity.Address;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

@WebServlet("/addressSerlvet")
public class AddressSerlvet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private AddressDao dao = new AddressDaoImpl();

    protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
        doPost(request,response);
    }

    /** * @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse * response) */
    protected void doPost(HttpServletRequest request,IOException {

        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String method=request.getParameter("method");
        if("provincial".equals(method)){
            getProvincial(request,response);
        }
        if("city".equals(method)){
            getCity(request,response);
        }
        if("area".equals(method)){
            getArea(request,response);
        }
    }
    /** * 根据市id获取该市下的区的全部信息 * @param request * @param response * @throws ServletException * @throws IOException */
    protected void getArea(HttpServletRequest request,IOException {

        String cityId = request.getParameter("cityId");
        // 从数据库中查询省的信息
        ArrayList<Address> areaList = dao.getAreaByCityId(Integer.parseInt(cityId));
        // 将集合转成json字符串
        JSONObject jsonObj = new JSONObject();
        JSONArray jsonArray = JSONArray.fromObject(areaList);
        jsonObj.put("areaList",jsonArray);
        String jsonDataStr = jsonObj.toString();

        response.getWriter().print(jsonDataStr);
    }
    /** * 获取省的信息 并相应 * @param request * @param response * @throws ServletException * @throws IOException */
    protected void getProvincial(HttpServletRequest request,IOException {

        // 从数据库中查询省的信息
        ArrayList<Address> addrList = dao.getProvince();
        // 将集合转成json字符串
        JSONObject jsonObj = new JSONObject();
        JSONArray jsonArray = JSONArray.fromObject(addrList);
        jsonObj.put("addrList",jsonArray);
        String jsonDataStr = jsonObj.toString();
        response.getWriter().print(jsonDataStr);
    }
    /** * 获取市的信息并相应 * @param request * @param response * @throws ServletException * @throws IOException */
    protected void getCity(HttpServletRequest request,IOException {

        String provinceId = request.getParameter("provincial");
        // 从数据库中查询省的信息
        ArrayList<Address> addrList = dao.getCityByProvinceId(Integer.parseInt(provinceId));

        // 将集合转成json字符串
        JSONObject jsonObj = new JSONObject();
        JSONArray jsonArray = JSONArray.fromObject(addrList);
        jsonObj.put("cityList",jsonArray);
        String jsonDataStr = jsonObj.toString();

        response.getWriter().print(jsonDataStr);
    }

}

AddressDao.java

package cn.bestchance.dao;

import java.util.ArrayList;

import cn.bestchance.entity.Address;

public interface AddressDao {
    /** * 获取省的id和名称 * @return */
    ArrayList<Address> getProvince();
    /** * 根据省的id获取市的信息 * @param provinceId * @return */
    ArrayList<Address> getCityByProvinceId(int provinceId);
    /** * 根据市的id获取区的信息 * @param cityId * @return */
    ArrayList<Address> getAreaByCityId(int cityId);
}

AddressDaoImpl.java

package cn.bestchance.dao.impl;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import cn.bestchance.dao.AddressDao;
import cn.bestchance.entity.Address;
import cn.bestchance.util.DBUtil;

public class AddressDaoImpl implements AddressDao {
    private DBUtil db = new DBUtil();
    @Override
    public ArrayList<Address> getProvince() {
        ArrayList<Address> addrList = new ArrayList<Address>();
        db.openConnection();
        String sql = "select * from province";
        ResultSet rs = db.excuteQuery(sql);
        try {
            while(rs.next()){
                Address addr = new Address();
                addr.setId(rs.getInt(2));
                addr.setAddress(rs.getString(3));
                addrList.add(addr);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            if(rs != null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
            db.closeResoure();
        }
        return addrList;
    }
    @Override
    public ArrayList<Address> getCityByProvinceId(int provinceId) {
        ArrayList<Address> addrList = new ArrayList<Address>();
        db.openConnection();
        String sql = "select * from city where fatherID = " + provinceId; //431200
        ResultSet rs = db.excuteQuery(sql);
        try {
            while(rs.next()){
                Address addr = new Address();
                addr.setId(rs.getInt(2));
                addr.setAddress(rs.getString(3));
                addrList.add(addr);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            if(rs != null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
            db.closeResoure();
        }
        return addrList;
    }
    @Override
    public ArrayList<Address> getAreaByCityId(int cityId) {
        ArrayList<Address> addrList = new ArrayList<Address>();
        db.openConnection();
        String sql = "select * from area where fatherID = " + cityId; //431200
        ResultSet rs = db.excuteQuery(sql);
        try {
            while(rs.next()){
                Address addr = new Address();
                addr.setId(rs.getInt(2));
                addr.setAddress(rs.getString(3));
                addrList.add(addr);
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            if(rs != null){
                try {
                    rs.close();
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
            db.closeResoure();
        }
        return addrList;
    }

}

实体类Address.java

package cn.bestchance.entity;

public class Address {
    @Override
    public String toString() {
        return "Address [id=" + id + ",address=" + address + "]";
    }
    private int id;
    private String address;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getAddress() {
        return address;
    }
    public void setAddress(String address) {
        this.address = address;
    }
    public Address() {
        super();
        // TODO Auto-generated constructor stub
    }
    public Address(int id,String address) {
        super();
        this.id = id;
        this.address = address;
    }

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同