Ajax的三级联动 前后端分离写法

后端写法

项目结构如下

1.我们需要先在bean包中创建一个

City对象 此对象与数据库中的表内容对应上

2.servlet中创建一个queryCity方法

  接受前端页面传来的pid参数

String pid = req.getParameter("pid");

  调用service中的接口

    service实现类中调用Dao中的方法

  Dao中编写查询数据库的语句 并将其返回到servlet中的queryCity方法中

ArrayList<City> list =chService.queryCity(pid);

  将返回来的值转换成JSON 

String s = JSON.toJSONString(list);

  并响应回前端

resp.getWriter().print(s);

  

前端页面写法

  1.创建三个<select>标签  并给予id属性 以便后续调用

<select id="sheng">
</select>省
<select id="shi">
</select>市
<select id="qu">
</select>区

  2.在<head>内编写<script>内容

<script src="<%=request.getContextPath()%>/js/jquery-3.6.0.min.js"></script>
<script>
     /**
      *准备就绪函数
      *当页面加载完毕之后加载此块内容  
      */
    $(function (){
    
         getCityByPid(0,'#sheng')            //传参(将pid和'#sheng'传过去)并调用getCityByPid方法 将市的内容回显到下拉菜单内
                                            
         $("#sheng").change(function (){
                let pid = $("#sheng").val();  //获取id="sheng"的标签的当前value值
                getCityByPid(pid,'#shi');     //传参(将pid和'#shi'传过去)并调用getCityByPid方法 将市的内容回显到下拉菜单内
                $("#shi").empty();           //当id="sheng"的标签发生改变时 将 id="shi"和id="qu"标签内的内容清空
                $("#qu").empty();
            });
         $("#shi").change(function (){
                let pid = $(this).val();
                getCityByPid(pid,'#qu');      //传参(将pid和'#qu'传过去)并调用getCityByPid方法 将区的内容回显到下拉菜单内
                $("#qu").empty();            //当id="shi"的标签发生改变时 将id="qu"标签内的内容清空
            });
    })
    function getCityByPid(pid,area){
        $.ajax({
            /**
            *url 将data发送到什么地方
            *data 是将什么值传到url里面
            */
            url:"<%=request.getContextPath()%>/Champion",  
            data:{pid:pid,m:"queryCity"},
            type:"post",
            dataType:"json",
            success:function (obj){
                 /**
                     * 由于MySQL隐式转换
                     * 此处不给<option>一个value值 默认传<option></option>中间的字符
                     * 若传的是"请选择"三个字 由于隐式转换 则在sql语句中 会变成0
                     * 所以此处添加已选择的时候需要给予option 一个 value值 此值要与所查询的数据库中的对应pid不同
                     */
                $(area).append("<option value = '1'>请选择</option>"); // 由于我们是用的.change(改变事件) 所以当我们点击一个 省或市或区的时候才能触发事件
                                                           // 如果不加个表头 会导致显示的第一个数据我们无法直接点击也就无法触发.change事件
                for(let c of obj){
                    $(area).append("<option value="+c.id+">"+c.name+"</option>"); //将从后端返回的数据遍历添加进下拉菜单中
                }
            }
        });
    }
</script>

 

posted @ 2023-02-03 11:10  小钰Kira  阅读(43)  评论(0)    收藏  举报