1、写一个标签，在标签内增加上id属性。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--在script中引入jQuery，不然不会失效的-->    <script type="text/javascript" src="/webjars/jquery/3.6.3/jquery.min.js"></script></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