ajax

最新推荐文章于 2022-06-19 13:50:53 发布

tolm77549

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量86

点赞数

分类专栏：我的

本文链接：https://blog.csdn.net/tolm77549/article/details/116198545

版权

我的专栏收录该内容

2 篇文章 0 订阅

订阅专栏

5.1

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            margin: 0 auto; 
            background-color: rgb(255, 247, 180);
        }
        table{
            border: 1px solid black;
             border-collapse: collapse;
        }
        th{
            width: 100px;
            text-align: center;
            border: 1px solid black;
        }
        td{
            width: 100px;
            text-align: center;
            border: 1px solid black;
            
        }
        input{
            background-color: rgb(255, 255, 255);
        }
    </style>
</head>
<body>
    <div class="box">
        学号：<input type="text" id="stuno">
        姓名：<input type="text" id="stuname"><br>
        院系：<input type="text" id="studepart">
        专业：<input type="text" id="stumajor"><br>
        <input type="button" value="保存" id="btn" style="background-color:rgb(153, 152, 147);">
        <table id = 'tbl'>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>院系</th>
                <th>专业</th>
                <th></th>
            </tr>
        </table>
    </div>
    <script>
        var flag = "add";
        $(function(){
            $.get("http://60.205.177.189:8080/stu/getAllStu",function(e){
                for(var i = 0;i < e.data.length;i++){
                        var stuno = e.data[i].stuno;
                        var stuname = e.data[i].stuname;
                        var studepart = e.data[i].studepart;
                        var stumajor = e.data[i].stumajor;
                        $('#tbl').append("<tr><td>"+stuno+"</td><td>"+stuname+"</td><td>"+studepart+"</td><td>"+stumajor+"</td><td><a href = '#'>删除</a>|<a href = '#'>修改</a></td></tr>");
                    }
            });
        });
        $('#btn').click(function(){
            var student = {
                stuno: $('#stuno').val(),
                stuname: $('#stuname').val(),
                studepart: $('#studepart').val(),
                stumajor: $('#stumajor').val()
            }
            if(flag =="add"){
                $.ajax({
                    type: "post",
                    url: "http://60.205.177.189:8080/stu/addStu",
                    dataType: "json",
                    contentType:"application/json;charset=utf-8",
                    data:JSON.stringify(student),
                    async:true,
                    success: function (data) {
                        if(data.msg == "OK"){
                            flag = "add";
                            $('#tbl').append("<tr><td>"+$('#stuno').val()+"</td><td>"+$('#stuname').val()+"</td><td>"+$('#studepart').val()+"</td><td>"+$('#stumajor').val()+"</td><td><a href = '#' onclick = 'delRow(this)'>删除</a>|<a href = '#' onclick = 'editRow(this)'>修改</a></td></tr>");
                        }
                    }
                });
            }
            else if(flag = "edit"){
                $.ajax({
                    type: "post",
                    url: "http://60.205.177.189:8080/stu/update/stuno",
                    dataType: "json",
                    contentType:"application/json;charset=utf-8",
                    data:JSON.stringify(student),
                    async:true,
                    success: function (data) {
                        if(data.msg == "OK"){
                            flag = "add";
                            $(this).replaceWith("<tr><td>"+$('#stuno').val()+"</td><td>"+$('#stuname').val()+"</td><td>"+$('#studepart').val()+"</td><td>"+$('#stumajor').val()+"</td><td><a href = '#' onclick = 'delRow(this)'>删除</a>|<a href = '#' onclick = 'editRow(this)'>修改</a></td></tr>");
                        }
                    }
                });
            }
        });
        function editRow(obj){
            flag = "edit";
             var row = $(obj).parent().parent()[0];
             var stuno = $(obj).parent().parent()[0].children[0].innerText;
             $('#stuno').val(row.children[0].innerText);
             $('#stuname').val(row.children[1].innerText);
             $('#studepart').val(row.children[2].innerText);
             $('#stumajor').val(row.children[3].innerText);
        }
        function delRow(obj){
            var stuno = $(obj).parent().parent()[0].children[0].innerText;
            $.ajax({
                type: "post",
                url: "http://60.205.177.189:8080/stu/delete/stuno",
                dataType: "json",
                contentType:"application/json;charset=utf-8",
                async:true,
                success: function (data) {
                    if(data.msg == "OK"){
                        $(obj).parent().parent()[0].remove();
                    }
                }
            });
        }
    </script>