動態

詳情 返回 返回

使用Ajax+js實現在指定位置插入html - 動態 詳情

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

Javascript , Ajax
點贊

Add a new 評論

Some HTML is okay.