一、实验五
1.html
<!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>
<link rel="stylesheet" href="./css.css">
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="background">
<div id="div1">
<span class="span01">姓名:</span><input type="text" class="input01" id="name">
<span class="span01">学号:</span><input type="text" class="input01" id="num">
<br><br>
<span class="span01">院系:</span><input type="text" class="input01" id="depart">
<span class="span01">专业:</span><input type="text" class="input01" id="major">
<input type="button" value="保存" id="btn1">
</div>
<div id="div2">
<table>
<tr>
<th class="sno">学号</th>
<th class="sname">姓名</th>
<th class="sdepart">院系</th>
<th class="smajor">专业</th>
<th class="option"></th>
</tr>
</table>
</div>
</div>
<script src="./js.js"></script>
</body>
</html>
2.css
table {
border: 1px solid #000;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
height: 30px;
margin: 0;
padding: 0;
text-align: center;
font-weight: 10%;
}
#background {
width: 1000px;
height: 800px;
margin: 50px auto;
}
#div1 {
width: 750px;
height: 160px;
border: 2px solid rgb(77, 77, 77);
}
#div2 {
width: 750px;
height: 500px;
}
#btn1 {
width: 45px;
height: 30px;
position: relative;
top: 40px;
left: 70px;
}
.input01 {
margin-top: 10px;
width: 250px;
height: 25px;
}
.span01 {
margin-top: 10px;
margin-left: 10px;
font-weight: 600;
}
.sno {
width: 140px;
}
.sname {
width: 60px;
}
.sdepart {
width: 170px;
}
.smajor {
width: 150px;
}
.option {
width: 150px;
}
.spanOption1,
.spanOption2 {
font-size: 20px;
text-decoration: underline;
color: indigo;
cursor: pointer;
}
.span3 {
margin: 0 2px;
}
3.js
$(function() {
$.ajax({
type: "GET",
url: "http://60.205.177.189:8080/stu/getAllStu",
datatype: "json",
success: function(data) {
for (var i = 0; i < data.data.length; i++) {
console.log(data.data[i]);
var tr = document.createElement("tr");
var tdsno = document.createElement("td");
tdsno.innerHTML = data.data[i].stuno;
tdsno.setAttribute("class", "sno");
var tdsname = document.createElement("td");
tdsname.innerHTML = data.data[i].stuname;
tdsname.setAttribute("class", "sname");
var tdsdepart = document.createElement("td");
tdsdepart.innerHTML = data.data[i].studepart;
tdsdepart.setAttribute("class", "sdepart");
var tdsmajor = document.createElement("td");
tdsmajor.innerHTML = data.data[i].stumajor;
tdsmajor.setAttribute("class", "smajor");
var tdOption = document.createElement("td");
var span1 = document.createElement("span");
span1.setAttribute("class", "spanOption1")
var span2 = document.createElement("span");
span2.setAttribute("class", "spanOption2");
span1.innerHTML = "修改";
span2.innerHTML = "删除";
var span3 = document.createElement("span");
span3.innerHTML = "|";
span3.setAttribute("class", "span3")
tdOption.appendChild(span1);
tdOption.appendChild(span3);
tdOption.appendChild(span2);
tdOption.setAttribute("class", "option");
tr.appendChild(tdsno);
tr.appendChild(tdsname);
tr.appendChild(tdsdepart);
tr.appendChild(tdsmajor);
tr.appendChild(tdOption);
$("table").append(tr);
}
},
error: function() {
alerrt("失败!");
}
})
$(document).on("click", ".spanOption2", function() {
var sno = $(this).parent().parent().children(".sno")[0].innerHTML;
$.ajax({
type: "POST",
url: "http://60.205.177.189:8080/stu/delete/" + sno + " ",
success: function() {
alert("删除成功")
},
error: function() {
alerrt("失败!");
}
})
})
$(document).on("click", ".spanOption1", function() {
var sno = $(this).parent().parent().children(".sno")[0].innerHTML;
var sname = $(this).parent().parent().children(".sname")[0].innerHTML;
var sdepart = $(this).parent().parent().children(".sdepart")[0].innerHTML;
var smajor = $(this).parent().parent().children(".smajor")[0].innerHTML;
$("#name")[0].setAttribute("name", "1");
$("#name")[0].value = sname;
$("#num")[0].value = sno;
$("#depart")[0].value = sdepart;
$("#major")[0].value = smajor;
})
$("#btn1").click(function() {
if ($("#name").eq(0).attr("name") === "1") {
var student = {
"stuno": $("#num")[0].value,
"stuname": $("#name")[0].value,
"studepart": $("#depart")[0].value,
"stumajor": $("#major")[0].value
}
$.ajax({
type: "POST",
url: "http://60.205.177.189:8080/stu/update/" + $("#num")[0].value,
datatype: "json",
data: JSON.stringify(student),
contentType: "application/json; charset=utf-8",
success: function(data) {
alert("修改成功");
},
error: function() {
alert("失败!");
}
})
} else {
var name = $("#name").val();
var num = $("#num").val();
var depart = $("#depart").val();
var major = $("#major").val();
var student = {
"stuno": num,
"stuname": name,
"studepart": depart,
"stumajor": major
}
$.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(data) {
alert("保存成功")
},
error: function() {
alert("失败!");
}
})
}
})
})