web项目的菜单展示-三级联动菜单展示

最新推荐文章于 2024-08-15 18:19:19 发布

java我跟你拼了

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量304

点赞数 5

分类专栏：其他文章标签：前端 ajax 三级联动菜单展示 java tomcat jsp

本文链接：https://blog.csdn.net/qq_43071699/article/details/102711869

版权

其他专栏收录该内容

62 篇文章 0 订阅

订阅专栏

三级联动菜单的展示

用的是Struts2 + Mybatis框架进行操作

文件结构

在这里插入图片描述

核心代码

CasCade.jsp

<%@ page pageEncoding="UTF-8" contentType="text/html;UTF-8" isELIgnored="false"%>
<html>
<head>
    <script type="application/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js">
    </script>
    <script type="application/javascript">
        $(function () {
            //展示所有的省份
            $.ajax({
                url:"${pageContext.request.contextPath}/cascade/showAllProvinces",
                type:"GET",
                dataType:"json",
                success:function (provinces) {
                    //把所有的省份展示在第一个下拉列列表中
                    for (var i=0;i<provinces.length;i++){
                        //创建option标签
                        var option=$("<option value="+provinces[i].code+">"+provinces[i].name+"</option>");
                        $("#province").append(option);
                    }
                    //初始化北京对应的市
                    $.ajax(
                        {
                            url:"${pageContext.request.contextPath}/cascade/showCitys",
                            type:"GET",
                            data:"provincecode="+110000,
                            dataType:"json",
                            success:function (citys) {
                                //每次添加清空
                                $("#city").empty();
                                //渲染该省份对应的市
                                for (var i=0;i<citys.length;i++){
                                    var option=$("<option value="+citys[i].code+">"+citys[i].name+"</option>")
                                    $("#city").append(option);
                                }
                                //把第一个市对应的第一个区展示在第三个下拉框中
                                $.ajax({
                                    url:"${pageContext.request.contextPath}/cascade/showAreas",
                                    type:"GET",
                                    data:"citycode="+110100, //把第一个市对应的code传入
                                    dataType:"json",
                                    success:function (areas) {
                                        $("#area").empty();
                                        for (var i=0;i<areas.length;i++){
                                            var option=$("<option>"+areas[i].name+"</option>");
                                            $("#area").append(option);
                                        }
                                    }
                                })
                            }
                        }
                    )
                }
            });
            //给第一个省份的下拉框添加onchange事件
            $("#province").change(function () {
                //获取用户选中的code
                var  provincecode=$("#province :selected").val();
                //把省份code传入后台
                $.ajax(
                    {
                        url:"${pageContext.request.contextPath}/cascade/showCitys",
                        type:"GET",
                        data:"provincecode="+provincecode,
                        dataType:"json",
                        success:function (citys) {
                            //每次添加清空
                            $("#city").empty();
                            //渲染该省份对应的市
                            for (var i=0;i<citys.length;i++){
                                var option=$("<option value="+citys[i].code+">"+citys[i].name+"</option>")
                                $("#city").append(option);
                            }
                            //把第一个市对应的第一个区展示在第三个下拉框中
                            $.ajax({
                                url:"${pageContext.request.contextPath}/cascade/showAreas",
                                type:"GET",
                                data:"citycode="+citys[0].code, //把第一个市对应的code传入
                                dataType:"json",
                                success:function (areas) {
                                    $("#area").empty();
                                    for (var i=0;i<areas.length;i++){
                                        var option=$("<option>"+areas[i].name+"</option>");
                                        $("#area").append(option);
                                    }
                                }
                            })
                        }
                    }
                )
            });
            //给第二个下拉框填充change事件
            $("#city").change(function () {
                //获取选中的citycode
              var  citycode= $("#city option:selected").val();
               $.ajax({
                   url:"${pageContext.request.contextPath}/cascade/showAreas",
                   type:"GET",
                   data:"citycode="+citycode,
                   dataType:"json",
                   success:function (areas) {
                       $("#area").empty();
                       for (var i=0;i<areas.length;i++){
                        var option=$("<option>"+areas[i].name+"</option>");
                        $("#area").append(option);
                       }
                   }
               })
            })
        })
    </script>
</head>
<body>
<select id="province">
</select>
<select id="city">
</select>
<select id="area">
</select>
</body>
</html>

一级菜单

public class ProvinceAction  extends ActionSupport {

    public  String  showAllProvinces(){
        ProvinceService ps=new ProvinceServiceImpl();
        //获取到所有省份
        List<Province> provinces = ps.showProvinces();
        //把List集合转换为JSON协议串
        String jsonString = JSON.toJSONString(provinces);
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        try {
            PrintWriter out = response.getWriter();
            out.print(jsonString);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return  null;
    }
}

二级菜单

public class CityAction extends ActionSupport {
    //接受省份code  provincecode
    private  String  provincecode;

    public String getProvincecode() {
        return provincecode;
    }

    public void setProvincecode(String provincecode) {
        this.provincecode = provincecode;
    }


    public  String   showCitys(){
        CityService cs= new CityServiceImpl();
        //查询该省份对应的所有的市
        List<City> cities = cs.showCitys(provincecode);
        //把List集合转换为JSON协议串
        String jsonString = JSON.toJSONString(cities);
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        try {
            PrintWriter out = response.getWriter();
            out.print(jsonString);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return  null;
    }
}

三级菜单

public class AreaAction  extends ActionSupport {
    //接收citycode
    private  String  citycode;

    public String getCitycode() {
        return citycode;
    }

    public void setCitycode(String citycode) {
        this.citycode = citycode;
    }


    public  String   showAreas(){
        AreaService as=new AreaServiceImpl();
        List<Area> areas = as.showAreas(citycode);
        //把List集合转换为JSON协议串
        String jsonString = JSON.toJSONString(areas);
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        try {
            PrintWriter out = response.getWriter();
            out.print(jsonString);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return  null;
    }
}

实体类

public class Area {
    private  Integer  id;
    private  String   code;
    private  String   name;
    private  String   citycode;

public class City {
    private  Integer  id;
    private  String   code;
    private  String   name;
    private  String   provincecode;

public class Province {
    private  Integer  id;
    private  String   code;
    private  String   name;

java我跟你拼了

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
web项目的菜单展示-三级联动菜单展示

三级联动菜单的展示用的是Struts2 + Mybatis框架进行操作文件结构核心代码CasCade.jsp<%@ page pageEncoding="UTF-8" contentType="text/html;UTF-8" isELIgnored="false"%><html><head> <script type="appli...
复制链接

扫一扫