超详细!省市区三级联动页面显示_长不大的小鱼的博客-程序员秘密

技术标签: java  

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

第一步 导入数据到数据库

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

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

mvc设计模式
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;
}

最后看看效果
效果图希望大家能够做出自己想要的效果。
如果对大家有帮助的话,还请大家点个赞,让更多的人能够看到。
你的点赞是我写博客最大的动力!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yyxxppyypp/article/details/108268248

智能推荐

百度地图离线开发demo(初始化地图)_oliver666666的博客-程序员秘密_百度地图初始化

使用百度地图api,只要瓦片对应上,api对上了,地图的使用还是较为简单的,demo官网上的也可参考,只需将BMapGL后边的gl去掉即可&lt;!--地图初始化 --&gt;&lt;template&gt; &lt;div id="allmap" style="width: 100%;height: 100%;" /&gt;&lt;/template&gt;&lt;script&gt;export default { components: {}..

opencv和HALCON坐标系的不同_冯相文要加油呀的博客-程序员秘密

opencv的坐标原点在左上角,往右为X轴正方向,往下为Y轴正方向(用Image Watch可以很容易看出来)HALCON的坐标原点在左上角,往右为Y轴正方向,往下为X轴正方向(HALCON窗口左下角可以出来)

Python自学之路:第二课_MIYAGI_Desu的博客-程序员秘密

第2课0. 什么是BIF?BIF 就是 Built-in Functions,内置函数。为了方便程序员快速编写脚本程序(脚本就是要编程速度快快快!!!),Python 提供了非常丰富的内置函数,我们只需要直接调用即可,例如 print() 的功能是“打印到屏幕”,input() 的作用是接收用户输入(注:Python3 用 input() 取代了 Python2 的 raw_input(),用法如有不懂请看视频讲解)。太多BIF学不过来怎么办?看不懂英文说明怎么办?Python3的资料太少怎么办?没事

MemCache详解_Quiet_boy的博客-程序员秘密

MemCache是什么MemCache是一个自由、源码开放、高性能、分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载。它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高了网站访问的速度。MemCaChe是一个存储键值对的HashMap,在内存中对任意的数据(比如字符串、对象等)所使用的key-value存储,数据可以来自数据库调用、API调用,或者页面渲染的结果。

apiDoc 详解 api接口文档生成_Dom_留声机的博客-程序员秘密_apidoc

PHP使用apiDoc api接口文档安装apidocapidoc 命令参数列表配置(apidoc.json)apidoc.json配置项apidoc注释参数@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@apiHeaderExam...

android api 和版本对应表汇总_AaVictory.的博客-程序员秘密_android api版本对应

Android历代版本的命名:我们都是知道,安卓系统的历来的名称都是很有意思的,下面无限互联Android培训的老师归纳了一下:Android在正式发行之前,最开始拥有两个内部测试版本,并且以著名的机器人名称来对其进行命名,它们分别是:阿童木(AndroidBeta),发条机器人(Android1.0)。后来由于涉及到版权问题,谷歌将其命名规则变更为用甜点作为它们系统版本的代号的命名方法。甜点命名法开始于Android1.5发布的时候。作为每个版本代表的甜点的尺寸越变越大,然后按照26个字母数序:

随便推点

Tomcat内存优化第二篇 - 个别优化参数详解_路克森的博客-程序员秘密_tomcat内存优化参数

博主个人主页前言今天我们接着来说tomcat这部分的小知识哦 上一篇我们提到了如何设置我们tomcat的内存大小 这一篇主要来说一下tomcat的优化思路 以及如何能够让tomcat抗住并发呢?开发众所周知 我们一个完整的系统肯定不是一个单体应用就能扛得住的 在大并发的压迫下 如果我们的程序还是个单机系统 那肯定会会快就挂了 所以我们就不得不做出改变 那么常见的tomcat优化或者说高可用...

科大讯飞指定录音文件转文字(异步)_XStorms的博客-程序员秘密_科大讯飞录音文件转文字

/** * 指定录音文件转文字(异步) * @param bo * @return */ @Override public JSONObject recognizeAudio(QueryRecognizeBo bo){ Map&lt;String,Object&gt; recordMap = extLxccCdrMapper.queryRelativePath(bo.getCallId()); String fileP.

优雅地处理运行时权限请求_rain9155的博客-程序员秘密

前言从android 6.0(API 级别 23)开始,android引入了运行时权限,用户开始在应用运行时向其授予权限,而不是在应用安装时向其授予权限,如果应用的某项功能需要使用到受运行时权限保护的资源(例如相机、位置、麦克风等),但在运行该功能前没有动态地申请相应的权限,那么在调用该功能时就会抛出SecurityException异常, android 6.0已经推出了很多年了,相信大家对于运行时权限的申请过程已经非常的熟悉,但是android的运行时权限的申请过程一直都是非常的繁琐的,主要有两步:

视频播放的心得体会(一)_JackLee18的博客-程序员秘密

  最近在做短视频播放的应用,为了实现比较好的交互体验,这边用到了缓存,预缓存处理。我这边用到的播放器是SJBaseVideoPlayer 这个库。首先要向这个开源库的作者表示感谢,感谢他贡献自己劳动成果。  在实际应用中,我主要对播放器划分了三个层,交互控制层,播放层,缓存处理层。交互控制层  交互控制层,主要就是根据产品的需求做出对应的交互效果,UI效果。这边会因为具体的业务需求而经常发...

运维思索:自动化运维体系如何入手_木讷大叔爱运维的博客-程序员秘密_自动化运维体系

需求运维是事件驱动,还是自驱动可能是我们在运维工作中不太关注的问题。事件驱动让运维止步于故障,而自驱动让运维不止于建设。持续性的运维建设就需要一套自动化的运维体系,那么我们应该从何入手?其实前期《运维思考》一系列文章已经给我们答案了,就是从运维框架入手分层建设、打好基础,记住“万丈高楼平地起,勿在浮沙筑高台”。运维框架通常讲到运维建设,我们脑海中首先浮现的是“一团麻”,因为这不是一个人、一个岗位的工作,而是一整个团队的工作;所以我们将“这团麻”进行由底层向上可划分为:IT基础设施层IT基础

推荐文章

热门文章

相关标签