Jquery+Ajax三级联动菜单(mysql+SM+Ajax)

最新推荐文章于 2024-07-15 11:27:32 发布

JiangLi_

最新推荐文章于 2024-07-15 11:27:32 发布

阅读量369

点赞数

分类专栏：前端技术文章标签： Ajax

本文链接：https://blog.csdn.net/jiangli_/article/details/93771999

版权

前端技术专栏收录该内容

11 篇文章 0 订阅

订阅专栏

三级联动菜单(mysql+SM+Ajax)

具体思路

1.把所有的数据导入到mysql数据库中

2.分清表与表之间的关系

3.展示所有的省份

4.通过选中的省份code获取该省份对应的市

5.通过选中的市code获取该市对应的区

6.初始化北京对应的数据

7.当省份改变后,改变对应的市,并且初始化第一个市对应得区

建表
建实体
Dao

查询所有的省份
创建mapper文件
创建config文件

导入mysql驱动jar

jdbc.properties

driver=com.mysql.jdbc.driver

url=jdbc:mysql://localhost:3306/数据库名称

username=root

password=root
service
action
jsp

<html>
    <head>
        <script  引入Jquery文件>           
        </script>
        <script>
            //加载页面执行
            $(function(){
                $.ajax({
                    url:"后台响应路径",
                    type:"请求类型GET",
                    dataType:"json",
                    success:function(provinces){
                        for(var i= 0 ; i< provinces.length;i++){
                            var option = $("<option  value="+provinces[i].code+">"+provinces[i].name+"</option>");
                            $("#province").append(option);
                    }
                })
            });
                //给第一个下拉框添加change事件
                $("#province").change(function(){
                    //获取选中的省份的code
                    var code = $("# province option:selected").val();
                    $.ajax({
                      url:"${path}/city/showCitys",
                      type:"GET",
                      data:"provincecode="+code,//把省份的code传入City表中
                      dataType:"json",
                        success:function(citys){
                            for(var i = 0 ; i<citys.length;i++){
                                //每次清空
                                $("#city").empty();
                                var   option = $("<option  value="+citys[i].code+">"+citys[i].name+"</option>");
                                $("#city").append(option);
                            }
                        }
                    })
                });
                
                $("#city").change(function(){
                    //获取选中的市的code
                    var code = $("#city option:selected").val();
                    $.ajax({
                        url:"${path}/area/showAreasByCityCode",
                        type:"GET",
                        data:"citycode="+code,
                        datatType:"json",
                        success:function(areas){
                            for(var i= 0 ; i<areas.length;i++)
                                $(#area).empty();
                            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>