使用AJAX实现系别、班级、学生的三级联动

小鱼儿 2023-10-11 22:03 22阅读 0赞

什么是三级联动呢?

三级联动就是三个级别相互依赖。

**系别实体类 Department**

![cff3abd1aacc47a5b361a51c53558ca4.png][]

**班级实体类 Classes**

![129026f3371e4ef4a9f6f5d16d92907d.png][]

**学生实体类 Student**

![99de8a42b74349d790a4f5afbedb0472.png][]

*  只有点击系部才能出来相对应的班级

![f00038568e45414a876c695f42771b8c.gif][]

*  只有点击班级才能出来相对应的学生

**项目创建**

1.  创建html页面(首先需要引入jquery)
2.      <script src="/jQuery/jquery-3.1.1.min.js"></script>
3.  创建下拉框

系部：<select id="se1">
                    <option>--请选择系部--</option>
               </select>
            班级：<select id="se2">
                    <option>--请选择班级--</option>
                </select>
            学生：<select id="se3">
                    <option>--请选择学生--</option>
               </select>

4.在页面加载完毕的时候，要保证能获取到所有系部信息

*  得到服务器返回的数据
 *  将JSON字符串接收
 *  将数据遍历带HTML页面中

$(function () {
                //初始化值 把系部查询出来
                $.ajax({
                    url:"/user",
                    dataType : "json",
                    type:"post",
                    data:{
                        method:"get1"
                    },
                    success:function(date){
                        console.log(date);
                        //清空select  下拉框
                        $("#se1").children().not(":eq(0)").remove();
                        //遍历数据
                        for(var i=0;i<date.length;i++){
                            console.log(date[i].name);
                            $("#se1").append("<option value="+date[i].did+">" +date[i].dname+ "</option>");
                        }
                    }
                });
    })

后端代码

private void get1(HttpServletRequest req, HttpServletResponse resp) throws IOException {
            List<DepartMent> Xlist = userService.selX();
            String s = JSON.toJSONString(Xlist);
            resp.getWriter().print(s);
        }

//查询所有系部
        public  List<DepartMent> selX() {
            ArrayList<DepartMent> dlist = new ArrayList<>();
            String sql="select * from department";
            try {
                //获取连接
                conn = JdbcUtil.getConn();
                //预加载Statement对象，数据库的操作对象
                ps = conn.prepareStatement(sql);
                //执行sql,返回结果集
                rs = ps.executeQuery();
                while (rs.next()){
                    DepartMent departMent = new DepartMent();
                    departMent.setDid(rs.getInt("did"));
                    departMent.setDname(rs.getString("dname"));
                    dlist.add(departMent);
                }
            } catch (Exception e) {
                System.out.println("selX异常信息："+e);
            }finally {
                JdbcUtil.close(conn, ps, rs);
            }
            return dlist;
        }

5.系部和班级的联动

*  为系部的下拉列表去绑定change事件(当系部发生改变时，我就执行)
 *  首先先将班级和学生下拉列表的选项清空
 *  使用户能够选择系部的信息
 *  在根据用户所选择的系部信息来获取到对应的班级信息
 *  获取到对应的班级信息
 *  将获取到的数据遍历到HTML页面中

//下拉框2  当下拉框1内容发生改变，我就执行
                $("#se1").change(function () {
                    var id =  $("#se1").val();
                    // alert("下拉框被改变" + id);
                    $.ajax({
                        url:"/user",
                        type:"post",
                        data:{
                            method:"get2",
                            id:id
                        },
                        dataType : "json",
                        success:function(date){
    
                            //清空select  下拉框
                            $("#se2").children().not(":eq(0)").remove();
                            $("#se3").children().not(":eq(0)").remove();
                            //遍历数据
                            for(var i=0;i< date.length;i++){
                                console.log(date[i].name);
                                $("#se2").append("<option value="+date[i].cid+">"+date[i].cname+"</option>");
                            }
                        }
                    });
                });

后端代码

//根据系部获取班级
        private void get2(HttpServletRequest req, HttpServletResponse resp) throws IOException {
            String id = req.getParameter("id");
            List<Classes> Blist = userService.selB(Integer.parseInt(id));
            String s = JSON.toJSONString(Blist);
            resp.getWriter().print(s);
        }

//根据系部查询班级
        public  List<Classes> selB(int id) {
            ArrayList<Classes> dlist = new ArrayList<>();
            String sql="select * from classes where did=?";
            try {
                //获取连接
                conn = JdbcUtil.getConn();
                //预加载Statement对象，数据库的操作对象
                ps = conn.prepareStatement(sql);
                ps.setInt(1, id);
                //执行sql,返回结果集
                rs = ps.executeQuery();
                while (rs.next()){
                    Classes classes = new Classes();
                    classes.setDid(rs.getInt("did"));
                    classes.setCid(rs.getInt("cid"));
                    classes.setCname(rs.getString("cname"));
                    dlist.add(classes);
                }
            } catch (Exception e) {
                System.out.println("selB异常信息："+e);
            }finally {
                JdbcUtil.close(conn, ps, rs);
            }
            return dlist;
        }

6.班级和学生联动

*  为班级的下拉列表去绑定change事件(当班级发生改变时，我就执行)
 *  首先先将学生下拉列表的选项清空
 *  使用户能够选择班级的信息
 *  在根据用户所选择的班级信息来获取到对应的学生信息
 *  获取到对应的学生信息
 *  将获取到的数据遍历到HTML页面中

//下拉框3  当下拉框2内容发生改变，我就执行
                $("#se2").change(function () {
                    var id =  $("#se2").val();
                    // alert("下拉框被改变" + id);
                    $.ajax({
                        url:"/user",
                        type:"post",
                        data:{
                            method:"get3",
                            id:id
                        },
                        dataType : "json",
                        success:function(date){
                            //清空select  下拉框
                            $("#se3").children().not(":eq(0)").remove();
                            //遍历数据
                            for(var i=0;i< date.length;i++){
                                console.log(date[i].name);
                                $("#se3").append("<option value="+date[i].sid+">"+date[i].sname+"</option>");
                            }
                        }
                    });
                });

后端代码

//根据班级获取学生
        private void get3(HttpServletRequest req, HttpServletResponse resp) throws IOException {
            String id = req.getParameter("id");
            List<Student> Blist = userService.selXs(Integer.parseInt(id));
            String s = JSON.toJSONString(Blist);
            resp.getWriter().print(s);
        }

//根据班级查询学生
        public  List<Student> selXs(int id) {
            ArrayList<Student> dlist = new ArrayList<>();
            String sql="select * from Student where cid=?";
            try {
                //获取连接
                conn = JdbcUtil.getConn();
                //预加载Statement对象，数据库的操作对象
                ps = conn.prepareStatement(sql);
                ps.setInt(1, id);
                //执行sql,返回结果集
                rs = ps.executeQuery();
                while (rs.next()){
                    Student student = new Student();
                    student.setSid(rs.getInt("sid"));
                    student.setCid(rs.getInt("cid"));
                    student.setSname(rs.getString("sname"));
                    dlist.add(student);
                }
            } catch (Exception e) {
                System.out.println("selB异常信息："+e);
            }finally {
                JdbcUtil.close(conn, ps, rs);
            }
            return dlist;
        }

JDBC连接工具类

public class JdbcUtil {
        private static final String URL="jdbc:mysql://localhost:3306/schools?serverTimezone=GMT%2B8";
        private static final String USER="root";
        private static final String PWD="123sa";
    
        //加载驱动
        static {
            try {
                Class.forName("com.mysql.cj.jdbc.Driver");
            } catch (ClassNotFoundException e) {
                System.out.println("加载驱动异常"+e);
            }
        }
    
        //获取连接
        public static Connection getConn() {
            Connection conn= null;
            try {
                conn = DriverManager.getConnection(URL, USER, PWD);
            } catch (SQLException e) {
                System.out.println("获取连接异常"+e);
            }
            return conn;
        }
    
        //关流
        public static void close(Connection conn,PreparedStatement ps,ResultSet rs){
            try {
                if (rs != null){
                    rs.close();
                }
                if (ps != null){
                    ps.close();
                }
                if (conn != null){
                    conn.close();
                }
            } catch (SQLException e) {
                System.out.println("关流异常"+e);
            }
        }
    
    }

[cff3abd1aacc47a5b361a51c53558ca4.png]: https://img-blog.csdnimg.cn/cff3abd1aacc47a5b361a51c53558ca4.png
[129026f3371e4ef4a9f6f5d16d92907d.png]: https://img-blog.csdnimg.cn/129026f3371e4ef4a9f6f5d16d92907d.png
[99de8a42b74349d790a4f5afbedb0472.png]: https://img-blog.csdnimg.cn/99de8a42b74349d790a4f5afbedb0472.png
[f00038568e45414a876c695f42771b8c.gif]: https://img-blog.csdnimg.cn/f00038568e45414a876c695f42771b8c.gif