web实验记录

2023-11-12 21:05:40

实验内容：

设计一交互界面如图所示，其中上部为输入区域，下部为表格显示区域，表格数据通过Jquery Ajax动态请求。

实验目的及要求：

（1）理解和掌握Jquery AJAX的get方式请求
（2）理解和掌握Jquery AJAX的post方式提交

问题描述：

1.使用 JQuery请求服务端接口，返回数据信息，并在页面中加载显示。
1)以get方式进行数据请求
2)数据接口地址：
http://60.205.177.189:8080/stu/getAllStu
3)不需要任何参数
4)回调函数接收所返回的json对象
5)返回数据类型为json
2.上部区域输入数据信息，点击“保存”后调用服务端保存数据接口存储数据，同时将下部表格增加一行显示所添加数据。
1)数据接口地址：
http://60.205.177.189:8080/stu/addStu
2)参数
将所要添加的数据构造为对象
var student={
“stuno”:学号值，
“stuname”:姓名值,
“studepart”: 院系值,
“stumajor”:专业值,
}
通过post请求时将对象序列化为json格式提交
{
data: JSON.stringify(student)
}
3.点击表格中“删除”，请求服务端删除数据接口，在服务端数据成功删除后，移除表格中数据行。
数据接口地址：
http://60.205.177.189:8080/stu/delete/当前行学号
4.点击表格中“修改”，获取当前行数据，并显示在上方输入框中，重新输入内容后更新保存“保存”。
数据接口地址：
http://60.205.177.189:8080/stu/update/学号
将所要添加的数据构造为对象
var student={
“stuno”:学号值，
“stuname”:姓名值,
“studepart”: 院系值,
“stumajor”:专业值,
}
通过post请求时将对象序列化为json格式提交
{
data: JSON.stringify(student)
}
注意：因学号是主键，修改是可不更改学号

代码：

<!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>实验5</title>
    <script src="JQuery2.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        form{
            position: relative;
            margin: 50px auto;
            margin-bottom: 10px;
            border: 1px solid black;
            width: 600px;
            height: 100px;
        }
        input[type="text"]{
            margin: 5px;
        }
        input[type="submit"]{
            position: absolute;
            right: 20px;
            width: 50px;
            height: 25px;
        }
        table{
            width: 550px;
            height: auto;
            border: 1px solid black;
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        th{
            border: 1px solid black;
        }
        td{
            border: 1px solid black;
        }
    </style>
    <script>
        $(document).ready(function(){
            //通过get方式请求加载数据
            $.ajax({
                type:"GET",
                url:"http://60.205.177.189:8080/stu/getAllStu",
                dataType:"json",
                contentType:"application/json; charset=utf-8",
                success:function(data){
                    for(var i=0; i<data.data.length; i++){
                        if(data.data[i]==null){
                            continue;
                        }
                        var s_stuno = data.data[i].stuno;
                        var s_sname = data.data[i].stuname;
                        var s_studepart = data.data[i].studepart;
                        var s_stumajor = data.data[i].stumajor;
                        
                        var content="<tr>"+
                        "<td id='sid'>"+s_stuno+"</td>"+
                        "<td>"+s_sname+"</td>"+
                        "<td>"+s_studepart+"</td>"+
                        "<td>"+s_stumajor+"</td>"+
                        "<td>"+'<a href="#" class="a1">修改</a>'+"|"+'<a href="#" class="a2">删除</a>'+"</td>"+
                        "</tr>";
                        $("#table1").append(content);
                    }
                }
            });

            //通过post方式添加数据到服务器
            $("body").on("click", "#f_Submit" ,function(){
                var s_stuno = $("#stuno").val();
                var s_stuname = $("#stuname").val();
                var s_studepart = $("#studepart").val();
                var s_stumajor = $("#stumajor").val();
                var student={
                    "stuno":s_stuno,
                    "stuname":s_stuname,
                    "studepart":s_studepart,
                    "stumajor":s_stumajor,
                };
                $.ajax({
                    type: "POST",
                    url: "http://60.205.177.189:8080/stu/addStu",
                    data:JSON.stringify(student),
                    dataType: "json",
                    contentType:"application/json; charset=utf-8",
                    success: function(data){
                        // alert("添加成功");
                        location.reload();
                    }
                });  
            });

            //向服务器发出删除请求
            $("body").on("click", ".a2" ,function(){
                var id = $(this).parents("tr").find("td:eq(0)").text();
                $(this).parents("tr").remove();
                $.ajax({
                    type:"POST",
                    url:"http://60.205.177.189:8080/stu/delete/"+id,
                    dataType:"json",
                    contentType: "application/json;charset=utf-8",
                    success:function(data){
                        // alert("删除成功");
                    }
                });
            });

            //发送请求修改数据
            $("body").on("click", ".a1" ,function(){
                //获取表格中的值
                var id = $(this).parents("tr").find("td:eq(0)").text();
                var s_stuname = $(this).parents("tr").find("td:eq(1)").text();
                var s_studepart = $(this).parents("tr").find("td:eq(2)").text();
                var s_stumajor = $(this).parents("tr").find("td:eq(3)").text();
                var tr=$(this).parents("tr");
                //显示在输入框中
                $("#stuno").val(id);
                $("#stuname").val(s_stuname);
                $("#studepart").val(s_studepart);
                $("#stumajor").val(s_stumajor);

                $("#f_Submit").off().on("click",function(){
                    var s_stuno = $("#stuno").val();
                    var new_stuname = $("#stuname").val();
                    var new_studepart = $("#studepart").val();
                    var new_stumajor = $("#stumajor").val();
                    var student={
                        "stuno":id,
                        "stuname":new_stuname,
                        "studepart":new_studepart,
                        "stumajor":new_stumajor,
                        };

                    $.ajax({
                        type:"POST",
                        url:"http://60.205.177.189:8080/stu/update/"+id,
                        dataType:"json",
                        contentType:"application/json; charset=utf-8",
                        data:JSON.stringify(student),
                        success:function(data){
                            // alert("修改成功");
                            var content="<tr>"+
                            "<td id='sid'>"+s_stuno+"</td>"+
                            "<td>"+new_stuname+"</td>"+
                            "<td>"+new_studepart+"</td>"+
                            "<td>"+new_stumajor+"</td>"+
                            "<td>"+'<a href="#" class="a1">修改</a>'+"|"+'<a href="#" class="a2">删除</a>'+"</td>"+
                            "</tr>";
                            tr.replaceWith(content);
                        }  
                    });
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <form>
            &nbsp;&nbsp;学号:<input type="text" id="stuno">
            姓名:<input type="text" id="stuname">
            <br>
            &nbsp;&nbsp;院系:<input type="text" id="studepart">
            专业:<input type="text" id="stumajor">
            <br>
            <input type="submit" value="保存" id="f_Submit">
        </form>
        <table id="table1">
            <thead>
                <th>学号</th>
                <th>姓名</th>
                <th>院系</th>
                <th>专业</th>
                <th></th>
            </thead>
        </table>
    </div>
</body>
</html>

不足之处，欢迎斧正！
转载采用请声明！

码农公寓

实验内容：

实验目的及要求：

问题描述：

代码：

相关文章