超详细!省市区三级联动页面显示

项目中用到
项目中需要用到收货地址,所有写下这个省市区 三级联动的页面。
实现 这个效果有很多种方式 我使用的是
将数据存入到数据库中,用ajax从数据库中查出来 显示在jsp页面中

第一步 导入数据到数据库

省市区三级联动数据表
在这里要注意 我第一次导入的时候 老是报错 建议将int(11) 改为int(6)
把 ENGINE=?这句话删掉 只要一个建表语句 和插入语句。

第二步 使用mvc的设计模式设计

超详细!省市区三级联动页面显示_第1张图片
model 模型使用dao
view 使用jsp显示
Controller 使用servlet

第三步 写代码

其实思路很简单 在jsp页面中 使用ajax 去数据库中查询数据 然后追加到 jsp 中。
(view层) jsp中的代码 后面的都是依葫芦画瓢。

<%@page pageEncoding="UTF-8" %>
<html>
<body><select id="province" onchange="change()">select><select id="city" onchange="changeCity()">select><select id="area">select>
body>
html>
<script>
    onload = function () {//页面加载之后
        //创建ajax引擎对象
        var request = new XMLHttpRequest();
        //去的地址
        request.open("get","address.do?p=findAdress&id="+0);//省中的父id为0
        request.send(null);
        request.onreadystatechange = function () {
            if(request.readyState==4 && request.status ==200){
                var ret = request.responseText;//返回的数据
                var json = eval(ret);//将ret 转换为json 数据
                for (var i = 0; i < json.length; i++) {
                    var option = new Option(json[i].Aname,json[i].Aid);
                    document.getElementById("province").append(option);//追加到省中去
                }
                change();//去数据库中查市的数据 然后追加到市中
            }
        }
    }
     function change() {
        var provinceid = document.getElementById("province").value;
        var city = document.getElementById("city");

        city.length = 0;
        //创建ajax引擎对象
        var request = new XMLHttpRequest();
        //打开指定方法
        request.open("get","address.do?p=findAdress&id="+provinceid);
        request.send(null);
        request.onreadystatechange = function () {
            if(request.readyState==4 && request.status==200){
                var ret = request.responseText;
                var json = eval(ret);
                for (var i = 0; i < json.length; i++) {
                    var option = new Option(json[i].Aname,json[i].Aid);
                    document.getElementById("city").append(option);
                }
                changeCity();
            }
        }

    }
    function changeCity() {
        var cityid = document.getElementById("city").value;
        var area = document.getElementById("area");
        area.length = 0;
        var request = new XMLHttpRequest();
        request.open("get","address.do?p=findAdress&id="+cityid);
        request.send(null);
        request.onreadystatechange = function () {
            if(request.readyState==4 && request.status==200){
                var ret = request.responseText;
                var json = eval(ret);
                for (var i = 0; i < json.length; i++) {
                    var option = new Option(json[i].Aname,json[i].Aid);
                    document.getElementById("area").append(option);
                }
            }
        }
    }
script>

Controller 层 servlet 中的代码

@WebServlet("/address.do")//使用注解的方式
public class AddressServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");//设置编码格式
        String p = request.getParameter("p");
        if("findAdress".equals(p)){
            doFindAdress(request,response);
        }
    }

    private void doFindAdress(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String id = request.getParameter("id");
        List<Area> list = AddressDAO.findAdress(id);
        if(list.size()==0){
            response.getWriter().println("[]");
        }
        //解析json 数据
        StringBuffer sb = new StringBuffer("[");
        for (Area area : list) {
            sb.append("{'Aid':'").append(area.getAid()).append("','Aname':'").append(area.getAname()).append("'},");
        }
        sb.replace(sb.length()-1,sb.length(),"]");
        response.getWriter().println(sb.toString());
    }
}

model 层 dao 中的代码

public class AddressDAO {
    //查找所有的地区
    public static List<Area> findAdress(String id){
        String sql = "select Aid,Aname from city where parent_id = ?";
        List<Area> list = DBUtil.query(sql,Area.class,id);
        return list;
    }
}

pojo 中的代码

public class Area {
    //省市区的名字
    private int Aid;
    private int parent_id;
    private String Aname;
}

最后看看效果
超详细!省市区三级联动页面显示_第2张图片希望大家能够做出自己想要的效果。
如果对大家有帮助的话,还请大家点个赞,让更多的人能够看到。
你的点赞是我写博客最大的动力!

你可能感兴趣的:(java)