jQuery写ajax(课程管理系统分页+添加课程)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

页面布局：

   <button class="tj">添加</button>
<div>
    <table class="tab">
        <caption>课程管理</caption>
        <thead>
            <tr>
                <th>课程编号</th>
                <th>课程名称</th>
                <th>课时</th>
                <th>年级</th>
               
            </tr>
        </thead>
        <tbody class="tbody"></tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button class="one">首页</button>
                    <button class="on">上一页</button>
                    <span class="pageIndex"></span>
                    <span>/</span>
                    <span class="pageAll"></span>
                    <button class="next">下一页</button>
                    <button class="last">尾页</button>
                </td>
            </tr>
        </tfoot>
    </table>
</div>
<div class="box1">
    <!-- subjectName：课程名称
    classHour：课时
    gradeId：年级编号 -->

    <ul>

        <li>

            课程名称：

            <input type="text" class="subjectName">

        </li>
        <li>

            课时：
            <input type="text" class="classHour">

        </li>
        <li>
            年级编号：<input type="text" class="gradeId">

        </li>
        <li>
            <button class="queding">确定</button>
            <button class="quxiao">取消</button>
        </li>
</div>

页面样式：

    <style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    th,
    td {
        border: 1px solid black;
        text-align: center;
    }

    table {
        border: 1px solid black;
        width: 800px;
        border-collapse: collapse;
    }

    ul {
        margin-top: 10px;
        width: 400px;
        height: 200px;
        border: 1px solid black;

        display: none;
    }

    .classHour {
        margin-left: 32px;
    }

    input {
        outline: none;
    }



    li button:first-child {
        margin-top: 10px;
    }

    button {
        width: 50px;
    }
</style>

正常情况下添加课程框是隐藏起来的，当点击添加的时候，添加课程框会显示出来， 点击确定的时候会获取Input框里的值，并添加到课程管理后台，点击取消会隐藏添加框

   <script src="./jquery.js"></script>
<script>
    let pageIndex = 1
    let pageSize = 1
    let pageAll = 1
    function fn() {
        // let div = $("<p>111</p>")
        // $("body").append(div)
        // location.href = './ajax练习.html'
        //         subjectName:  课程名称  可以为空，支持模糊查询
        // pageIndex：页码，默认值是1
        // pageSize:  每页数量，默认值是10
        $(".tbody").html("")
        $.get("https://www.bingjs.com:8001/Subject/GetSubjectsConditionPages", {
            pageIndex: pageIndex,
            pageSize: 5,
            // SubjectName: $(".search_text").val()
        }, function (a) {
            let { count, data } = a
            //             subjectName：课程名称
            // classHour：课时
            // gradeId：年级编号
            data.forEach(key => {
                let tr = $(
                    `
       <tr>
        <td>${key.SubjectId}</td>
        <td>${key.SubjectName}</td>
        <td>${key.ClassHour}</td>
        <td>${key.GradeId}</td>

        </tr>
        `
                )
                $("tbody").append(tr)
            });
            pageAll = Math.ceil(count / 5)
            $(".pageIndex").html(pageIndex)
            $(".pageAll").html(pageAll)
            //    调用添加
            fa()

        })

    }
    // 首页
    $(".one").click(function () {
        pageIndex = 1
        fn()
    })
    fn()
    // 尾页
    $(".last").click(function () {
        pageIndex = pageAll
        fn()
    })
    //下一页
    $(".next").click(function () {
        if (pageIndex++ >= pageAll) {
            pageIndex = pageAll
        }
        fn()
    })
    //上一页
    $(".on").click(function () {
        if (pageIndex-- <= 1) {
            pageIndex = 1
        }
        fn()
    })


    //添加
    function fa() {
        //添加
        $(".tj").click(function () {

点击添加按钮，添加框显示出来

            $("ul").show()

点击取消隐藏添加框

            $(".quxiao").click(function () {
                $("ul").hide()
            })

点击确定按钮

            $(".queding").click(function () {
                let subjectName = $(".subjectName").val()
                let classHour = $(".classHour").val()
                let gradeId = $(".gradeId").val()
                if (subjectName) {
                    $.post("https://www.bingjs.com:8001/Subject/Add", {
                      subjectName: subjectName,
                        classHour: classHour,
                        gradeId: gradeId,
                    }, function (item) {
                        if (item) {
                            alert('添加成功')
                        }

调用fn()数据刷新

                        fn()

清除input框的值

                        $(".subjectName").val("")
                        $(".classHour").val("")
                        $(".gradeId").val("")
                        
                    }
                    )
                } else {

必须要输入课程名称

                    alert("课程名称不能为空")
                    return
                }
            })
        })
    }
</script>

年级编号要跟数据库要求填写格式一致

点击确定，添加成功后会提示添加成功 添加成功后清楚输入框内容