Ajax-实现下拉框级联刷新数据

最新推荐文章于 2021-08-05 22:56:56 发布

神仙刘

最新推荐文章于 2021-08-05 22:56:56 发布

阅读量700

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_41936090/article/details/110632453

版权

JS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

完整资源链接：下载
效果：

Ajax实现下拉框级联刷新数据

贴出JSP关键部分代码：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>hello</title>
</head>
<body>
<div>
    省会：
    <select id="option1">
        <option>--请选择省会--</option>
        <c:forEach items="${list}" var="list">
        <option  id="${list.id}">${list.name}</option>
        </c:forEach>
    </select>

    城市：
    <select id="option2">
        <option>--请选择城市--</option>
    </select>
</div>

<script type="text/javascript">
       window.onload = function () {
           //获取下拉框
           var option2 = document.getElementById("option2");
           var option1 = document.getElementById("option1");
           //创建xmlHttpRequest异步对象
           const xmlHttpRequest = new XMLHttpRequest();
           //下拉框点击事件
           option1.onchange = function () {
               removeAllChild();
               //进行Ajax异步请求
               //创建异步对象
               //绑定事件
               xmlHttpRequest.onreadystatechange = function () {
                   //xmlHttpRequest.status是网络请求状态，200表示成功，404找不到，500错误...
                   //xmlHttpRequest.readyState 跟踪异步请求的状态
                   //(0)未初始化
                   //(1)载入
                   //(2)载入完成
                   //(3)交互
                   //(4)完成
                   if (xmlHttpRequest.status==200&&xmlHttpRequest.readyState==4) {//只有当异步请求成功之后才进行数据处理
                       //处理数据
                       //xmlHttpRequest.responseText;可以获取从服务器异步请求的数据
                       var data = xmlHttpRequest.responseText;
                       //将服务器请求返回的JSON数据转换一下
                       var parse = JSON.parse(data);
                       //遍历数据
                       for (var i = 0; i < parse.length; i++) {
                           //创建第二个下拉框的option子元素
                           var newEle = document.createElement("option");
                           //创建第二个下拉框的子元素
                           newEle.innerHTML = parse[i].name;
                           //给这个创建的下拉框设置id值
                           newEle.setAttribute("id",parse[i].id)
                           //把新建的option元素添加到第二个下拉框
                           option2.appendChild(newEle);
                       }
                   }
               }
               //初始化请求数据
               //option1.selectedIndex：获取选中下拉框的索引
               var index = option1.selectedIndex;
               //option1.options[index].id：获取选中下拉框的id值（id可能以后会用到？）
               var id = option1.options[index].id;
               //如果第一个下拉框没有选中有效值，那么进行提示，停止此次异步请求
               if (id==null||id==""){alert("请选择！");return;}
               //open方法初始化请求参数以供 send() 方法稍后使用
               //第一个参数：请求方法
               //第二个参数：请求地址（如果jsp放在某文件夹下面得前面加两点。例如：../CityServlet）
               //第一个参数：是否异步请求，默认true
               xmlHttpRequest.open("get","/CityServlet?id="+id,true);
               //发起请求
               xmlHttpRequest.send();
           }

           /**
            * 这是一个用于删除第二个下拉框所有子元素的方法，
            * 在给第二个下拉框添加新元素之前使用，
            * 如果不删除，那么重复选择第一个下拉框，第二个下拉框会有每次选中省份的城市
            */
           function removeAllChild() {
               //获取第二个下拉框
               //获取下拉框子元素
               var children = option2.children;
               if (children.length>=1){//有子元素则删除
                   //特别注意：这里for循环的写法，寻常写法，删除子节点不完整
                   for (var i = children.length-1; i >=0; i--) {
                       option2.removeChild((children[i]))
                   }
                   //添加一个option，用于提示
                   var element = document.createElement("option");
                   element.innerHTML="--请选择城市--";
                   option2.append(element);
               }
           }

       }

</script>
</body>
</html>

刚刚学习Ajax，之前有用到过，不过多半是使用的jQuery，这里是用的是XmlHttpRequest异步对象实现的局部刷新。
为了复习一下servlet，还特地连接了MySQL数据库，使用动态数据。
在这个过程中遇到了一些问题，也都百度或者调试解决了：
最难受的是Dao层，明明所有代码都没问题，但是connection对象就是空指针，找不到类，而我直接用main方法测试，却是能够成功查询出数据，验证了我的代码没错，后来百度看到一篇问答：里面有提到JNDI 使用tomcat连接数据库要把MySQL jar包放入到tomcat lib目录下面。照着做了，就成功了。具体原因我估计是tomcat运行机制的问题？？？这里如果有大神还希望替我解惑！

有需要资源的朋友，可以在头部下载。