Web 实验五

最新推荐文章于 2023-04-22 21:06:59 发布

van_van_v

最新推荐文章于 2023-04-22 21:06:59 发布

阅读量1.4k

点赞数 1

文章标签： web

本文链接：https://blog.youkuaiyun.com/van_van_v/article/details/116195940

版权

实验目的及要求：

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

服务器接口测试地址：

http://60.205.177.189:8080/swagger-ui.html

1）不带参数接口

点击Try it out

查看接口调用结果：

2）带参数接口

点击Try it out

输入测试参数

调用接口查看结课

实验内容：

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

使用 JQuery请求服务端接口，返回数据信息，并在页面中加载显示。

以get方式进行数据请求
数据接口地址：

http://60.205.177.189:8080/stu/getAllStu

不需要任何参数
回调函数接收所返回的json对象
返回数据类型为json

运行截图

代码：

<!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="../js/jquary.js"></script>

    <script>

        $.ajax({

            type: "GET",

            url: "http://60.205.177.189:8080/stu/getAllStu",

            dataType: "json",

            contentType: "application/json;charset=utf-8",

            data: JSON.stringify(),

            success: function (data) {

                console.log(data);

                for (var i = 0; i < data.data.length; i++) { 

                    if (data.data[i] == null) {

                        continue;

                    }

                    var studepart = data.data[i].studepart;

                    console.log(studepart);

                    var stumajor = data.data[i].stumajor;

                    var stuname = data.data[i].stuname;

                    var stuno = data.data[i].stuno;

                    $("table").append("<tr>" +

                        "<td>" + stuno + "</td>" +

                        "<td>" + stuname + "</td>" +

                        "<td>" + studepart + "</td>" +

                        "<td>" + stumajor + "</td>" +

                        "<td>" + "<span id='span1'> 删除 |</span><span id='span2'> 修改 </span>" + "</td>" +

                        +"</tr>");

                    $("#span1").click(function () {

                        $(this).parent().parent().remove();

                    });

                    $("#span2").click(function () {

                        $(this).parent().parent().remove();

                    });

                }

            },

            error: function () { alert("error"); }

        })

    </script>

    <style>

        #div1 {

            height: 80px;

            width: 500px;

            border: #000 solid 1px;

            padding: 10px;

        }



        table {

            margin: 10px;

            border-collapse: collapse;

        }



        th {

            border: #000 solid 1px;

        }



        td {

            border: #000 solid 1px;

        }

    </style>

</head>



<body>

    <div id="div1">

        学号：<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="保存" style="float: right;">

    </div>

    <table>

        <thead>

            <th>学号</th>

            <th>姓名</th>

            <th>院系</th>

            <th>专业</th>

            <th></th>

        </thead>

    </table>

</body>



</html>

上部区域输入数据信息，点击“保存”后调用服务端保存数据接口存储数据，同时将下部表格增加一行显示所添加数据。

数据接口地址：

http://60.205.177.189:8080/stu/addStu

参数

将所要添加的数据构造为对象

var student={

"stuno":学号值，

"stuname":姓名值,

"studepart": 院系值,

"stumajor":专业值,

}

通过post请求时将对象序列化为json格式提交

{

data: JSON.stringify(student)

}

运行截图：

代码：

$("#button").click(function () {

            var student = {

                "stuno": $("#stuno").val(),

                "stuname": $("#stuname").val(),

                "studepart": $("#studepart").val(),

                "stumajor": $("#stumajor").val()

            }

            console.log(student);

            $.ajax({

                type: "POST",

                url: "http://60.205.177.189:8080/stu/addStu",

                dataType: "json",

                contentType: "application/json;charset=utf-8",

                data: JSON.stringify(student),

                success:function(){location.reload()},

                error:function(){alert("error")}

            })

        })

    });

点击表格中“删除”，请求服务端删除数据接口，在服务端数据成功删除后，移除表格中数据行。

数据接口地址：

http://60.205.177.189:8080/stu/delete/当前行学号

运行截图：

代码：

$(document).on('click','span:contains("删除")',function(){

                            console.log("--");

                            var stuno=$(this).parents('tr').find('td:first').text();

                            $.ajax({

                                type: "POST",

                                url: "http://60.205.177.189:8080/stu/delete/"+stuno,

                                dataType: "json",

                                contentType: "application/json;charset=utf-8",

                                data: JSON.stringify(),

                                success:function () { location.reload() },

                                error:function () { alert("error") }

                            })

                        });

点击表格中“修改”，获取当前行数据，并显示在上方输入框中，重新输入内容后更新保存“保存”。

数据接口地址：

http://60.205.177.189:8080/stu/update/学号

将所要添加的数据构造为对象

var student={

"stuno":学号值，

"stuname":姓名值,

"studepart": 院系值,

"stumajor":专业值,

}

通过post请求时将对象序列化为json格式提交

{

data: JSON.stringify(student)

}

注意：因学号是主键，修改是可不更改学号

运行截图：

代码：

$(document).on('click', 'span:contains("修改")', function () {

                console.log("--");

                var stuno = $(this).parents('tr').find('td:first').text();$("#stuno").val(stuno);

                var stuname = $(this).parents('tr').find('td:eq(1)').text();$("#stuname").val(stuname);

                var studepart = $(this).parents('tr').find('td:eq(2)').text();$("#studepart").val(studepart);

                var stumajor = $(this).parents('tr').find('td:eq(3)').text();$("#stumajor").val(stumajor);

                var student = {

                    "stuno": stuno,

                    "stuname": stuname,

                    "studepart": studepart,

                    "stumajor": stumajor,

                }

                $.ajax({

                    type: "POST",

                    url: "http://60.205.177.189:8080/stu/delete/" + stuno,

                    dataType: "json",

                    contentType: "application/json;charset=utf-8",

                    data: JSON.stringify(),

                    success: function () {},

                    error: function () { alert("delete error") }

                })

                $.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),

                    success: function () {  },

                    error: function () { alert("updata error") }

                })

            });