c-router-emulator/www/fw.html

102 lines
2.7 KiB
HTML
Raw Normal View History

2023-09-22 10:45:43 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="zifan">
<meta name="keywords" content="物联网">
<title>黑名单列表</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 50px;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
justify-items: center;
align-items: center;
}
.back {
background-color: rgba(41, 117, 117, 0.667);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
}
form {
padding: 10px;
}
</style>
</head>
<body>
<div>
<form onsubmit="return post_ip(this);" class="blackfrom">
<label>ip地址:</label>
<input name="ipaddr">
<button type="submit">添加</button>
<button type="button" id="del">删除</button>
</form>
2023-09-22 11:03:46 +08:00
<table class="balckTable back" width="250" align="center" border="1" cellspacing="0">
2023-09-22 10:45:43 +08:00
<thead>
<th>ip地址</th>
</thead>
<tbody id="blackTableBody" align="center">
</tbody>
</table>
</div>
<script>
window.onload = function () {
fetch("/cgi-bin/fw.cgi").then(resp => resp.json()).then(data => {
blackTableBody.innerText = "";
data.forEach(rowData => {
let tr = document.createElement("tr");
let td1 = document.createElement("td");
2023-09-22 11:03:46 +08:00
td1.innerText = rowData.ip;
2023-09-22 10:45:43 +08:00
2023-09-22 11:03:46 +08:00
tr.append(td1);
2023-09-22 10:45:43 +08:00
blackTableBody.append(tr);
});
}
)
let del = document.getElementById("del");
del.addEventListener("click", (event) => {
fetch("/cgi-bin/send.cgi").then(resp => resp.json()).then(data => {
if (data.code == 1) {
alert("删除成功!");
}
})
}
)
}
function post_ip(form) {
let form_data = {
ip: form.ipaddr.value
};
fetch("/cgi-bin/send.cgi", {
method: "post",
body: JSON.stringify(form_data),
headers: {
"Content-Type": "application/json;charset=utf-8"
}
}).then(resp => resp.json()).then(data => {
if (data.code == 0) {
alert("添加成功!");
}
})
onload();
return false;
}
</script>
</body>
</html>