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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。