使用Ajax+js实现在指定位置插入html

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

    
    
    


    

        

            
            

                
用户名
                
授权门控
                
门控所在场景
                
取消授权
            
        
    

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 = sqlDatabaseDoor.selectAllNOParam();
        System.out.println(door);
        //将查询到的集合转化为json格式
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(door);
        System.out.println(json);
        return json;
    }
}

4、使用Ajax的回调函数，将数据库中读取到的数据展示在页面上

可以看到，在指定的位置上已经出现了我们后续插入的html。如果此时数据库中再插入一条数据。

可以看到页面上就会继续插入html