实验目的及要求:
- 理解和掌握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") }
})
});