• 实验五全部代码,ajax请求


     

    <!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">
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <title>Document</title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        .info {
            border: 3px solid gray;
            width: 580px;
            height: 100px;
            margin-top: 50px;
            margin-left: 20%;
            padding: 5px 5px;
        }
    
        input {
            width: 200px;
            height: 22px;
            margin-left: 5px;
        }
    
        #subBtn {
            margin-right: 8px;
            float: right;
            width: 50px;
            height: 25px;
        }
    
        .display {
            margin-top: 5px;
            margin-left: 20%;
        }
    
        table {
            border-collapse: collapse;
    
        }
    
        th,
        td {
            border: 3px solid gray;
    
        }
    
        th {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }
    
        table #stuno {
            width: 80px;
        }
    
       table #studepart {
            width: 100px;
        }
    
        table  #stuname {
            width: 70px;
        }
    
        table #stumajor {
            width: 80px;
        }
    
        table #option {
            width: 80px;
        }
    </style>
    
    <body>
        <div class="container">
            <div class="info">
                <label>学号:</label><input type="text" name="stuno" id="stuno" class="in">
                <label>姓名:</label><input type="text" name="stuname" id="stuname" class="in">
                <br>
                <br>
                <label>院系:</label><input type="text" name="studepart" id="studepart" class="in">
                <label>专业:</label><input type="text" name="stumajor" id="stumajor" class="in">
                <br>
                <button id="subBtn">保存</button>
            </div>
            <div class="display">
                <table>
                    <thead>
                        <tr>
                            <th id="stuno" name="stuno">学号</th>
                            <th id="stuname" name="stuname">姓名</th>
                            <th id="studepart" name="studepart">院系</th>
                            <th id="stumajor" name="stumajor">专业</th>
                            <th id="option"></th>
                        </tr>
                    </thead>
                    <tbody id="tableList"></tbody>
                </table>
            </div>
        </div>
    </body>
    <script>
        let flag=0
        function getStu() {
            $.ajax({
                url: 'http://60.205.177.189:8080/stu/getAllStu',
                method: 'get',
                success: (res) => {
                    res.data.forEach(e => {
                        const item = `<tr><td id="stuno">${e.stuno}</td><td id="stuname">${e.stuname}</td><td id="studepart">${e.studepart}</td><td id="stumajor">${e.stumajor}</td><td id="option"><button data-id="${e.stuno}" onclick='edit(event)'>修改</button>|<button onclick='del(event)' data-id="${e.stuno}">删除</button></td></tr>`
                        $('#tableList').append(item)
                    });
    
                }
            })
        }
    
        function edit(e) {
            flag=1
            const childs = Array.from(e.target.parentNode.parentNode.childNodes).slice(0,-1)
            let inputs=document.getElementsByClassName("in")     
            var i=0
            for(const child of childs){       
                inputs[i].value=child.innerHTML        
                i++
            }
            $(".info #stuno").attr("disabled","disabled")
    
        }
        function del(e) {
            const form = { stuno: e.target.dataset.id }
            $.ajax({
                method: 'post',
                url: 'http://60.205.177.189:8080/stu/delete/' + form.stuno,
                data: JSON.stringify(form),
                processData: false,
                crossDomain: true,
                contentType: 'application/json',
                success: (res) => {
                    $("#tableList").html('')
                    getStu()
                    console.log(res)
                }
            })
        }
        function clear(){
            flag=0
            let inputs=document.getElementsByClassName("in")   
            var i=0
            for(i;i<4;i++){
                inputs[i].value=''
            }
            $(".info #stuno").removeAttr("disabled")
        }
        $(document).ready(() => {
            let subform = {}
            let editform = {}
            
            $("#subBtn").click(() => {
                $("input").each(function () {
                    subform[$(this).attr('name')] = $(this).val()
                })
                if(flag==0){
                    console.log(flag)
                $.ajax({
                    method: 'post',
                    url: 'http://60.205.177.189:8080/stu/addStu',
                    data: JSON.stringify(subform),
                    processData: false,
                    contentType: 'application/json',
                    success: (res) => {
                        console.log(res)
                        $("#tableList").html("")
                        getStu()
                        clear()
                    }
                })
            }else{
                $.ajax({
                    method: 'post',
                    url:'http://60.205.177.189:8080/stu/update/'+subform.stuno,
                    data: JSON.stringify(subform),
                    processData: false,
                    contentType: 'application/json',
                    success: (res) => {
                        console.log(res)
                        $("#tableList").html("")
                        getStu()
                        clear()
                    }
                })
            }
            })
            getStu()
        })
    </script>
    
    </html>
  • 相关阅读:
    乘法逆元
    P1082 同余方程
    数论编程
    倍增LCA模板
    快速幂模板Super
    黑白染色的模板
    暑假提高组集训Day1 T2
    暑假提高组集训Day1 T1
    7月18日刷题记录 二分答案跳石头游戏Getting
    hdu4738(割桥)
  • 原文地址:https://www.cnblogs.com/Sherlockmmc/p/14703574.html
Copyright © 2020-2023  润新知