在現(xiàn)代的網(wǎng)頁開發(fā)中，我們經(jīng)常需要動態(tài)地向表格添加數(shù)據(jù)。為了實現(xiàn)這一功能，我們可以使用Ajax技術(shù)。Ajax是一種在不刷新整個頁面的情況下與服務(wù)器進(jìn)行異步通信的技術(shù)，使用它我們可以動態(tài)地加載和提交數(shù)據(jù)，從而提升用戶體驗。 舉個例子來說明，假設(shè)我們有一個簡單的表格，包含姓名和年齡兩列。初始時，表格是空的，我們希望用戶能夠通過一個表單輸入新的數(shù)據(jù)，然后將這些數(shù)據(jù)實時地添加到表格中。 為了實現(xiàn)這個功能，我們可以使用以下的HTML代碼：

<form id="addForm">
    <input type="text" id="nameInput" placeholder="姓名">
    <input type="number" id="ageInput" placeholder="年齡">
    <button type="submit">添加</button>
</form>

在表單中，我們添加了姓名和年齡的輸入框，并為表單添加了一個提交按鈕。然后，我們需要為表單的提交事件寫一個處理函數(shù)，該函數(shù)使用Ajax來進(jìn)行異步通信：

<script>
document.getElementById("addForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表單的默認(rèn)提交行為
    var name = document.getElementById("nameInput").value;
    var age = document.getElementById("ageInput").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var response = JSON.parse(this.responseText);
            var table = document.getElementById("dataTable");
            var newRow = table.insertRow(-1);
            var nameCell = newRow.insertCell(0);
            var ageCell = newRow.insertCell(1);
            nameCell.innerHTML = response.name;
            ageCell.innerHTML = response.age;
        }
    };
    xmlhttp.open("POST", "addData.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("name=" + name + "&age=" + age);
});
</script>

在這段代碼中，我們首先通過getElementById()方法獲取輸入框中用戶輸入的姓名和年齡。然后，我們創(chuàng)建一個XMLHttpRequest對象，并設(shè)置其onreadystatechange事件處理函數(shù)。這個事件處理函數(shù)在Ajax請求狀態(tài)改變時被調(diào)用。 當(dāng)請求狀態(tài)為4（即請求已經(jīng)完成）且狀態(tài)碼為200（即請求成功）時，我們解析服務(wù)器返回的響應(yīng)文本，并使用insertRow()和insertCell()方法來在表格末尾新增一行和兩個單元格。然后，我們將姓名和年齡分別填入這兩個單元格中。 最后，我們調(diào)用open()方法設(shè)置請求的類型和URL，并通過setRequestHeader()方法設(shè)置請求頭。最后，我們使用send()方法發(fā)送請求，并將表單中的數(shù)據(jù)作為參數(shù)傳遞給服務(wù)器。 使用以上代碼，當(dāng)用戶填寫完表單后點擊“添加”按鈕時，表格會實時地刷新，新輸入的數(shù)據(jù)會被添加到表格的末尾。 總而言之，通過Ajax技術(shù)我們可以方便地實現(xiàn)動態(tài)給表格添加數(shù)據(jù)的功能。用戶只需要填寫表單并提交，就能實時地在表格中看到新增的數(shù)據(jù)。這不僅提升了用戶體驗，也使得網(wǎng)頁更加靈活和交互性。