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

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




    
    Title
    


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

使用Ajax+js实现在指定位置插入html_第1张图片
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的回调函数,将数据库中读取到的数据展示在页面上

使用Ajax+js实现在指定位置插入html_第2张图片
可以看到,在指定的位置上已经出现了我们后续插入的html。如果此时数据库中再插入一条数据。
使用Ajax+js实现在指定位置插入html_第3张图片
可以看到页面上就会继续插入html

你可能感兴趣的:(ajaxjavascript)