在現(xiàn)代的網(wǎng)頁開發(fā)中，動(dòng)態(tài)添加數(shù)據(jù)是一項(xiàng)常常出現(xiàn)的需求。而ajax技術(shù)則成為了實(shí)現(xiàn)這一需求的最佳選擇。使用ajax，我們可以方便地向服務(wù)器請(qǐng)求數(shù)據(jù)，并將獲取到的數(shù)據(jù)通過 JavaScript 動(dòng)態(tài)地添加到網(wǎng)頁上。本文將介紹如何使用ajax動(dòng)態(tài)添加數(shù)據(jù)到表格，讓我們一起來看看吧。
舉一個(gè)例子來說明這個(gè)需求。假設(shè)我們正在開發(fā)一個(gè)電子商務(wù)網(wǎng)站，我們需要在商品列表頁面上顯示商品的信息。傳統(tǒng)的做法是每次加載頁面時(shí)，從服務(wù)器請(qǐng)求商品數(shù)據(jù)并將其顯示在表格中。然而，這樣做會(huì)導(dǎo)致頁面加載速度變慢，特別是當(dāng)商品數(shù)據(jù)很多時(shí)。使用ajax動(dòng)態(tài)添加數(shù)據(jù)，我們可以在頁面加載完成后再向服務(wù)器請(qǐng)求商品數(shù)據(jù)，并將其一條一條地添加到表格中，這樣用戶可以立即看到部分商品信息，而不是等待所有商品數(shù)據(jù)都加載完成。
那么，如何使用ajax來實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)到表格呢？首先，我們需要在 HTML 文件中創(chuàng)建一個(gè)表格，并為其指定一個(gè) id。例如，我們可以創(chuàng)建一個(gè) id 為 "productTable" 的表格，用來存放商品信息。
商品名稱 價(jià)格
[
{
"name": "商品1",
"price": "100"
},
{
"name": "商品2",
"price": "200"
},
{
"name": "商品3",
"price": "300"
}
]var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var tableBody = document.getElementById("productTable").getElementsByTagName("tbody")[0];
for (var i = 0; i< data.length; i++) {
var row = document.createElement("tr");
var nameCell = document.createElement("td");
var priceCell = document.createElement("td");
nameCell.innerHTML = data[i].name;
priceCell.innerHTML = data[i].price;
row.appendChild(nameCell);
row.appendChild(priceCell);
tableBody.appendChild(row);
}
}
};
xhr.open("GET", "data.json", true);
xhr.send();