AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建交互式網(wǎng)頁應用程序的技術，它通過在后臺與服務器進行數(shù)據(jù)交換，實現(xiàn)無需刷新整個頁面的內容更新。在本文中，我們將探討如何使用AJAX來增加表格數(shù)據(jù)庫。通過AJAX，我們可以實現(xiàn)在不刷新頁面的情況下，向數(shù)據(jù)庫中添加新的數(shù)據(jù)，并在表格中實時顯示這些數(shù)據(jù)。
想象一下，我們有一個簡單的網(wǎng)頁應用程序，用戶可以在表格中添加新的數(shù)據(jù)。在傳統(tǒng)的情況下，當用戶填寫表格并提交時，整個頁面都會重新加載，數(shù)據(jù)會被發(fā)送到服務器進行處理，并且表格將在頁面重新加載后更新。但使用AJAX，我們可以實現(xiàn)在用戶填寫表格并提交時，只發(fā)送數(shù)據(jù)到服務器進行處理，并在不刷新整個頁面的情況下，將新的數(shù)據(jù)添加到表格中。
為了實現(xiàn)這一目標，我們可以使用以下的HTML代碼和JavaScript代碼：
<html><head><script>function addRow() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var table = document.getElementById("table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = response.name;
cell2.innerHTML = response.age;
}
};
xhr.open("POST", "add.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&age=" + age);
}
</script></head><body><table id="table"><tr><th>Name</th><th>Age</th></tr><?php
// Fetch existing data from database and populate the table rows
?></table><input type="text" id="name" placeholder="Name"><input type="number" id="age" placeholder="Age"><button onclick="addRow()">Add</button></body></html>在上面的代碼中，我們首先為"Add"按鈕綁定了一個onclick事件，當用戶點擊該按鈕時，將觸發(fā)addRow()函數(shù)。這個函數(shù)獲取用戶輸入的姓名和年齡，并使用XMLHttpRequest對象發(fā)送一個POST請求到服務器上的add.php頁面。請求的內容將以"name"和"age"的參數(shù)形式發(fā)送，并在請求頭部設置Content-Type為application/x-www-form-urlencoded。
在服務器端，我們可以使用PHP代碼來處理這個請求，并將新的數(shù)據(jù)添加到數(shù)據(jù)庫中：
<?php
$name = $_POST['name'];
$age = $_POST['age'];
// Insert the new data into the database
// Fetch the newly inserted data from the database
$newData = array('name' =>$name, 'age' =>$age);
echo json_encode($newData);
?>在上面的PHP代碼中，我們首先通過$_POST['name']和$_POST['age']來獲取從客戶端發(fā)送的數(shù)據(jù)。然后我們將這些數(shù)據(jù)插入到數(shù)據(jù)庫中，并從數(shù)據(jù)庫中檢索最新插入的數(shù)據(jù)。最后，我們將這些新的數(shù)據(jù)以JSON格式返回給客戶端。
回到客戶端的JavaScript代碼，在XMLHttpRequest的onreadystatechange事件中，當請求成功返回，并且響應狀態(tài)為200時，我們將獲取到的響應文本轉換為JSON格式，并將新的數(shù)據(jù)添加到表格中。具體地說，我們通過insertRow()方法在表格的末尾插入一行，并使用insertCell()方法在該行中插入兩個單元格。然后，我們將從響應中獲取到的新的數(shù)據(jù)填充到這兩個單元格中，最后實時顯示在表格中。
通過使用AJAX，我們實現(xiàn)了在不刷新整個頁面的情況下，向數(shù)據(jù)庫中添加新的數(shù)據(jù)，并在表格中實時顯示。這種技術不僅提供了更好的用戶體驗，還可以提高網(wǎng)頁應用程序的性能和效率。