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

IT_小杨

于 2023-05-22 10:33:37 发布

阅读量189

点赞数

分类专栏： AJAX 文章标签： html 前端 java

本文链接：https://blog.csdn.net/Y0156842/article/details/130801092

版权

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是三级联动呢?

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

系别实体类 Department

班级实体类 Classes

学生实体类 Student

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

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

项目创建

创建html页面(首先需要引入jquery)

<script src="/jQuery/jquery-3.1.1.min.js"></script>

创建下拉框

        系部：<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);
        }
    }

}