实验5555555

最新推荐文章于 2024-09-10 18:37:52 发布
Candle..
最新推荐文章于 2024-09-10 18:37:52 发布
阅读量60
点赞数
文章标签： css html javascript
本文链接：https://blog.csdn.net/m0_62387101/article/details/130319320
版权
<!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>
    <script src="jquery-3.6.4.min.js"></script>
    <style>
        body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        }
        #log {
            width: 300px;
            margin: 20px auto;
        }
        #login-form {
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            padding: 10px;
        }
        #login-form input {
            margin: 10px 0;
            padding: 5px;
            width: 100%;
            box-sizing: border-box;
        }
        #login-form button {
            background-color: #4CAF50;
            color: #fff;
            border: none;
            padding: 10px;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
        }
        #operate {
            display: none;
            margin: 20px auto;
            width: 300px;
        }
        #operate button {
            background-color: #4CAF50;
            color: #fff;
            border: none;
            padding: 10px;
            cursor: pointer;
            width: 100%;
            margin-top: 10px;
        }
        #inquire_table {
            display: none;
            margin: 20px auto;
            width: 800px;
        }
        #inquire_table th, #inquire_table td {
            padding: 10px;
            border: 1px solid #ddd;
        }
        #add_revise_table {
            display: none;
            margin: 20px auto;
            width: 600px;
            border: 1px solid #ddd;
            padding: 10px;
        }
        #add_revise_table input {
            margin: 10px 0;
            padding: 5px;
            width: 100%;
            box-sizing: border-box;
        }
        #revise_no {
            display: none;
            margin: 10px 0;
            padding: 5px;
            width: 100%;
            box-sizing: border-box;
        }
        #delete_table {
            display: none;
            margin: 20px auto;
            width: 400px;
        }
        #delete_table input {
            margin: 10px 0;
            padding: 5px;
            width: 100%;
            box-sizing: border-box;
        }
    </style>
    <script>
        $(function(){
            var Authorization1="null"
            $("#login").click(function(){
                var user1=$("#username").val();
                var password1=$("#password").val();
                $.ajax({
                    url:"http://114.67.241.121:8088/user/login",
                    type:"POST",
                    data:{
                        username:user1,
                        password:password1,
                    },
                    success:function(data){
                        alert("登录成功");
                        Authorization1=data.data.token;
                        $("#log").css("display","none");
                        $("#operate").css("display","block");
                    },
                    error:function(){
                        alert("登录失败");
                    }
                });
            })
            $("#inquire").click(function(){
                $("#add_revise_table").css("display","none");
                $("#delete_table").css("display","none");
                $("td").remove();
                $.ajax({
                    url:"http://114.67.241.121:8088/stu/list",
                    type:"get",
                    headers:{
                        'Authorization':Authorization1,
                    },
                    success:function(result){
                        console.log(result);
                        $("#inquire_table").css("display","block");
                        for(i=0;i<$(result.data).length;i++){
                            $("#inquire_table").append("<tr><td>" + 
                                result.data[i].stuaddess +
                                "</td><td>" + result.data[i].stugender +
                                "</td><td>" + result.data[i].stugrade +
                                "</td><td>" + result.data[i].stuid +
                                "</td><td>" + result.data[i].stumajor +
                                "</td><td>" + result.data[i].stuname+
                                "</td><td>" + result.data[i].stunative+
                                "</td><td>" + result.data[i].stuno +
                                "</td><td>" + result.data[i].stuphone +
                                "</td></tr>")
                        }
                    },
                    error:function(){
                        alert("查询错误")
                    },
                })
            })
            $("#add_btu").click(function(){
                $("#inquire_table").css("display","none");
                $("#add_revise_table").css("display","block");
                $("#delete_table").css("display","none");
                $("#revise_no").css("display","none");
                $("#add").css("display","block");
                $("#revise").css("display","none");
                $("#add").click(function(){
                    $.ajax({
                        url:"http://114.67.241.121:8088/stu/add",
                        type:"post",
                        headers:{
                            'Authorization':Authorization1
                        },
                        contentType:'application/json',
                        data:JSON.stringify({
                            "stuaddess":$("#a1").val(),
                            "stugender": $("#a2").val(),
                            "stugrade": $("#a3").val(),
                            "stumajor": $("#a4").val(),
                            "stuname": $("#a5").val(),
                            "stunative":$("#a6").val(),
                            "stuno": $("#a7").val(),
                            "stuphone":$("#a8").val(),
                        }),
                        success:function(){
                            alert("添加成功")
                        },
                        error:function(){
                            alert("添加失败")
                        }
                    })
                }) 
            })
            $("#revise_btu").click(function(){
                $("#inquire_table").css("display","none");
                $("#add_revise_table").css("display","block");
                $("#delete_table").css("display","none");
                $("#revise_no").css("display","block");
                $("#add").css("display","none");
                $("#revise").css("display","block");
                $("#revise").click(function(){
                    $.ajax({
                        url:"http://114.67.241.121:8088/stu/edit?stuid=",
                        type:"post",
                        headers:{
                            'Authorization':Authorization1
                        },
                        contentType:'application/json',
                        data:JSON.stringify({
                            "stuid":$("#a0").val(),
                            "stuaddess":$("#a1").val(),
                            "stugender": $("#a2").val(),
                            "stugrade": $("#a3").val(),
                            "stumajor": $("#a4").val(),
                            "stuname": $("#a5").val(),
                            "stunative":$("#a6").val(),
                            "stuno": $("#a7").val(),
                            "stuphone":$("#a8").val(),
                        }),
                        success:function(){
                            alert("修改成功")
                        },
                        error:function(){
                            alert("修改失败")
                        }
                    })
                })
            })
            $("#delete_btu").click(function(){
                $("#inquire_table").css("display","none");
                $("#add_revise_table").css("display","none");
                $("#delete_table").css("display","block");
                $("#delete").click(function(){
                    $.ajax({
                        url:"http://114.67.241.121:8088/stu/del?stuid="+Number($("#delete_no").val()),
                        type:"post",
                        
                        headers:{
                            'Authorization':Authorization1
                        },
                        

                        success:function(){
                            alert("删除成功")
                        },
                        error:function(){
                            alert("删除失败")
                        }
                    })
                })
            })
        })
    </script>
</head>
<body>
    <div id="log">
        <span>账号<input type="text" id="username"></span><br/>
        <span>密码<input type="text" id="password"></span><br/>
        <input type="submit" id="login" value="登录">
    </div>
    <div id="operate">
        <input type="submit" id="inquire" value="查询">
        <input type="submit" id="add_btu" value="添加">
        <input type="submit" id="revise_btu" value="修改">
        <input type="submit" id="delete_btu" value="删除">
    </div>
    <div>
        <table id="inquire_table">
            <th>地址</th>
            <th>性别</th>
            <th>年级</th>
            <th>编号</th>
            <th>专业</th>
            <th>姓名</th>
            <th>籍贯</th>
            <th>学号</th>
            <th>电话</th>
        </table>
        <div id="add_revise_table">
            <P id="revise_no">需要修改学生的编号：<input type="text" id="a0"></P>
            <P>地址：<input type="text" id="a1"></P>
            <P>性别：<input type="text" id="a2"></P>
            <P>年级：<input type="text" id="a3"></P>
            <P>专业：<input type="text" id="a4"></P>
            <P>姓名：<input type="text" id="a5"></P>
            <P>籍贯：<input type="text" id="a6"></P>
            <P>学号：<input type="text" id="a7"></P>
            <P>电话：<input type="text" id="a8"></P>
            <input type="submit" value="修改" id="revise">
            <input type="submit" value="添加" id="add">
        </div>
        <div id="delete_table">
            <p>需要删除的学生编号:<input type="text" id="delete_no"></p>
            <input type="submit" value="提交" id="delete">
        </div>
    </div>
</body>
</html>