js jquery ajax练习3

天金小麻花
已于 2022-01-26 10:51:11 修改
阅读量176
点赞数
文章标签： javascript jquery ajax
于 2021-04-27 10:37:47 首次发布
本文链接：https://blog.csdn.net/ATCG7/article/details/116194046
版权
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            width: 560px;
            margin: 30px auto;
            border: 1px solid #000;
        }

        .ipt {
            margin: 10px 0;
        }

        input {
            margin-bottom: 8px;
        }

        .btn {
            margin: 10px 10px;
            margin-left: 500px;
        }

        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
            margin-top: 10px;
        }

        th,
        tr,
        td {
            border: 1px solid #333;
        }

        a {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <form action="">
        <div class="ipt">
            学号： <input type="text" id="idnum">
            姓名： <input type="text" id="name" style="margin-right: 100px;">
            院系： <input type="text" id="dep">
            专业： <input type="text" id="major" style="margin-right: 100px;">
            <div class="btn">
                <button id="btn1">保存</button>
            </div>
            <div class="btn">
                <button id="btn2" style="display: none;">保存</button>
            </div>
        </div>

    </form>

    <table>
        <thead>
            <tr>

                <th>学号</th>
                <th>姓名</th>
                <th>院系</th>
                <th>专业</th>
                <th></th>

            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
    <script>
        $(function () {



            var created = function () {
                $("tbody").html('');
                $.ajax({
                    url: "http://60.205.177.189:8080/stu/getAllStu",
                    success: function (res) {
                        if (res.status === "200") {

                            for (var t in res.data) {
                                if (res.data[t] == null) {  
                                    continue
                                }
                                var tr = $("<tr></tr>");
                                tr.appendTo("tbody");

                                var idnum = $("<td>" + res.data[t].stuno + "</td>");
                                idnum.appendTo('tbody tr:last');

                                var name = $("<td>" + res.data[t].stuname + "</td>");
                                name.appendTo('tbody tr:last');

                                var dep = $("<td>" + res.data[t].studepart + "</td>");
                                dep.appendTo('tbody tr:last');

                                var major = $("<td>" + res.data[t].stumajor + "</td>");
                                major.appendTo('tbody tr:last');

                                var update = $("<td><a class='upd'>修改</a><span>|</span><a  class='del'>删除</a></td>");
                                update.appendTo("tbody tr:last");

                            }

                           

                        }
                    }
                })



            }
            created();

            $("#btn1").click(function () {
                var idnum = $("#idnum").val();
                var name = $("#name").val();
                var dep = $("#dep").val();
                var major = $("#major").val();
                var stu = {
                    "stuno": idnum,
                    "stuname": name,
                    "studepart": dep,
                    "stumajor": major
                }
                $.ajax({
                    url: "http://60.205.177.189:8080/stu/addStu",
                    type: "post",
                    contentType: 'application/json;charset=UTF-8',
                    data: JSON.stringify(stu),
                    success: function (res) {
                        if (res.status === "200") {
                            created();
                        }
                    }
                })


                return false

            })

            $(".del").click(function () {
                                var stuno = $(this).parent().parent().find("td").eq(0).text();
                                $.ajax({
                                    type: "post",
                                    url: "http://60.205.177.189:8080/stu/delete/" + stuno,
                                    data: JSON.stringify(stuno),

                                })
                                return false
                            })

                            $(".upd").click(function () {
                                $("#btn1").css("display", "none");
                                $("#btn2").css("display", "inline-block");
                                var stuno = $(this).parent().parent().find("td").eq(0).text();


                                $("#idnum").val($(this).parent().parent().find("td").eq(0).text());
                                $("#name").val($(this).parent().parent().find("td").eq(1).text());
                                $("#dep").val($(this).parent().parent().find("td").eq(2).text());
                                $("#major").val($(this).parent().parent().find("td").eq(3).text());



                                $("#btn2").click(function () {
                                    var idnum = $("#idnum").val();
                                    var name = $("#name").val();
                                    var dep = $("#dep").val();
                                    var major = $("#major").val();
                                    var stu = {
                                        "stuno": idnum,
                                        "stuname": name,
                                        "studepart": dep,
                                        "stumajor": major
                                    }
                                    $.ajax({
                                        type: "post",
                                        url: "http://60.205.177.189:8080/stu/update/" + stuno,
                                        data: JSON.stringify(stu),
                                        contentType: 'application/json;charset=UTF-8',

                                    })
                                    $("#btn2").css("display", "none");
                                    $("#btn1").css("display", "inline-block");
                                    return false
                                })
                                return false
                            })


        })
    </script>
</body>

</html>