在網(wǎng)站開發(fā)中，常常需要從MySQL數(shù)據(jù)庫中獲取數(shù)據(jù)并展現(xiàn)在頁面上。傳統(tǒng)的方法是通過刷新整個(gè)頁面來更新表格中的數(shù)據(jù)，這種方式不僅效率低下，還會(huì)降低用戶體驗(yàn)。而使用Ajax技術(shù)能夠在不刷新整個(gè)頁面的情況下更新數(shù)據(jù)，提高用戶體驗(yàn)。

為了使用Ajax更新數(shù)據(jù)，我們需要先編寫一個(gè)處理請求的PHP文件，該文件從數(shù)據(jù)庫中獲取數(shù)據(jù)，然后將數(shù)據(jù)以JSON格式返回給JavaScript處理。以下是一個(gè)示例的PHP文件：

上面的PHP文件獲取了名為“mydatabase”中名為“mytable”的表中的所有數(shù)據(jù)，并將其以JSON格式返回。下面是一個(gè)獲取JSON數(shù)據(jù)的JavaScript代碼：

// 發(fā)起請求
var xhr = new XMLHttpRequest();
xhr.open("GET", "getdata.php", true);
xhr.onload = function() {
// 解析JSON數(shù)據(jù)
var data = JSON.parse(this.responseText);
// 更新表格中的數(shù)據(jù)
var table = document.getElementById("mytable");
table.innerHTML = "";
for (var i = 0; i< data.length; i++) {
var row = table.insertRow(i);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = data[i].id;
cell2.innerHTML = data[i].name;
cell3.innerHTML = data[i].age;
}
};
xhr.send();

上面的JavaScript代碼通過XMLHttpRequest對象發(fā)起了一個(gè)GET請求，從getdata.php文件中獲取JSON數(shù)據(jù)并解析。然后通過innerHTML屬性更新表格中的數(shù)據(jù)。

實(shí)現(xiàn)了上述代碼后，在前端頁面調(diào)用JavaScript即可實(shí)時(shí)更新表格數(shù)據(jù)，大大提升用戶使用體驗(yàn)。