1、寫一個標籤，在標籤內添加上id屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<table align="center" border="1" cellspacing="0">
<!--比如在這個tr標籤後插入HTML-->
<tr id="admin">
<td>用户名</td>
<td>授權門控</td>
<td>門控所在場景</td>
<td>取消授權</td>
</tr>
</table>
</div>
</body>
</html>
2、使用Ajax向服務器發起請求，
const xml = new XMLHttpRequest();
xml.onload = function(){
}
xml.open("GET","http://localhost:8080/page/all");
xml.send();3、controller層向數據庫發起查詢請求，將查詢到的記錄的集合轉化為json格式，響應給瀏覽器。
@RestController
@RequestMapping("/page")
public class page {
@Autowired
SqlDatabaseDoorImpl sqlDatabaseDoor;
@RequestMapping("/all")
public String methodD0orAll() throws JsonProcessingException {
//Door類是一個pojo類，這是一個使用Spring封裝MyBatis框架的查詢數據庫的操作
List<Door> door = sqlDatabaseDoor.selectAllNOParam();
System.out.println(door);
//將查詢到的集合轉化為json格式
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(door);
System.out.println(json);
return json;
}
}4、使用Ajax的回調函數，將數據庫中讀取到的數據展示在頁面上
<script>
const xml = new XMLHttpRequest();
xml.onload = function(){
if(xml.readyState==4&&xml.status==200){
//獲取響應的數據
let vals = xml.responseText;
console.log(vals);
//將傳入的字符串當做 JavaScript 代碼進行執行
let jsonArr = eval(vals);
console.log(jsonArr);
let temp = '';
let div = document.querySelector("#admin")//獲取id為admin的標籤
console.log(div)
for(let user of jsonArr){
console.log(user);
temp =
'<td>'+user.dr_userName+'</td>'+
'<td>'+user.dr_topic+'</td>'+
'<td>'+user.dr_scene+'</td>'+
'<td><a href="#" data-name='+user.dr_userName+' data-topic='+user.dr_topic+' onclick="del()">取消</a></td>'
console.log("temp="+temp);
//afterend 將代碼插入在id為admin的標籤的下一處地方
//beforebegin 將代碼插入在id為admin的標籤的上一處地方
//afterbegin 將代碼插入在id為admin的標籤內的第一個位置
//beforeend 將代碼插入在id為admin的標籤內的最後一個位置
div.insertAdjacentHTML("afterend",temp);
}
}
}
xml.open("GET","http://localhost:8080/page/all");
xml.send();
</script>
可以看到，在指定的位置上已經出現了我們後續插入的html。如果此時數據庫中再插入一條數據。
可以看到頁面上就會繼續插入html
