web实验记录5

---

实验目的

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

---

实验内容

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

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

1)以get方式进行数据请求
2)数据接口地址：
http://60.205.177.189:8080/stu/getAllStu
3)不需要任何参数
4)回调函数接收所返回的json对象
5)返回数据类型为json

代码：

 //通过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;
                        // console.log("s_stuno:"+s_stuno,"s_sname:"+s_sname,"s_studepart:"+s_studepart,"s_stumajor"+s_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);
                    }
                }
            });

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

1)数据接口地址：
http://60.205.177.189:8080/stu/addStu
2)参数
将所要添加的数据构造为对象
var student={
"stuno":学号值，
"stuname":姓名值,
"studepart": 院系值,
"stumajor":专业值,
}
通过post请求时将对象序列化为json格式提交
{
	   	data: JSON.stringify(student)
}

代码：

//通过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();
                    }
                });
                
            });

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

1)数据接口地址：
http://60.205.177.189:8080/stu/delete/当前行学号

代码：

//向服务器发出删除请求
            $("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("删除成功");
                    }
                });
            });

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

1)数据接口地址：
http://60.205.177.189:8080/stu/update/学号
2)将所要添加的数据构造为对象
var student={
"stuno":学号值，
"stuname":姓名值,
"studepart": 院系值,
  "stumajor":专业值,
}
3)通过post请求时将对象序列化为json格式提交
{
	   	data: JSON.stringify(student)
}
4)注意：因学号是主键，修改是可不更改学号
代码：

 /*修改*/
            $("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){
                            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);}  
                    });
                });
            });

---

写在最后

仅对个人实验做一次记录，文中不足、错误之处欢迎指正；
创作不易，点个赞吧！