使用Ajax將JSON數據插入表格是一種常見的前端開發技巧。通過這種方式，我們可以動態地將從服務器獲取的數據以表格的形式展示給用戶。假設我們有一個名為"products"的JSON文件，其中包含了一些商品的信息，比如名稱、價格和庫存量等。我們要做的是使用Ajax請求這個JSON文件，并將它的數據插入到一個HTML表格中。
首先，我們需要在HTML文件中創建一個表格，用于展示從JSON文件中獲取的數據。我們可以使用table、thead、tbody和tr等標簽來創建表格的結構，比如：

<table>
<thead>
<tr>
<th>商品名稱</th>
<th>價格</th>
<th>庫存量</th>
</tr>
</thead>
<tbody id="productTable">
</tbody>
</table>

在這個表格中，我們通過thead標簽創建了表格的表頭，包含了商品名稱、價格和庫存量三列。tbody標簽的id設為"productTable"，方便稍后通過JavaScript找到該元素并插入數據。
接下來，我們需要編寫JavaScript代碼來完成從JSON文件中獲取數據并將其插入到表格中的任務。我們可以使用jQuery或純JavaScript來實現。
使用jQuery的話，我們可以通過$.ajax()方法來發送GET請求獲取JSON數據，并在回調函數中處理數據插入的邏輯。比如：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$.ajax({
url: "products.json",
type: "GET",
dataType: "json",
success: function(data) {
var tableBody = $("#productTable"); // 獲取表格的tbody元素
$.each(data, function(index, product) {
var row = "<tr><td>" + product.name + "</td><td>" + product.price + "</td><td>" + product.stock + "</td></tr>";
tableBody.append(row); // 將新行插入到表格中
});
}
});
</script>

在這段代碼中，我們使用$.ajax()方法發送GET請求，指定URL為"products.json"，并設定dataType為"json"，告訴jQuery返回的數據是JSON格式。當請求成功時，回調函數會被執行。在回調函數中，我們首先通過$("#productTable")找到表格的tbody元素，然后使用$.each()方法遍歷JSON數據。對于每一個商品，我們將其名稱、價格和庫存量拼接成一個完整的表格行，并通過append()方法將其插入到表格中。
純JavaScript方式的實現與jQuery類似，我們使用XMLHttpRequest對象來發送GET請求獲取JSON數據，并在onreadystatechange事件中處理數據插入的邏輯。比如：

<script>
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"); // 獲取表格的tbody元素
data.forEach(function(product) {
var row = "<tr><td>" + product.name + "</td><td>" + product.price + "</td><td>" + product.stock + "</td></tr>";
tableBody.innerHTML += row; // 將新行插入到表格中
});
}
};
xhr.open("GET", "products.json", true);
xhr.send();
</script>

在這段代碼中，我們創建了XMLHttpRequest對象，并在onreadystatechange事件中判斷請求的狀態和響應的狀態碼。當請求成功完成時（readyState為4且status為200），我們使用JSON.parse()方法將響應數據解析為JSON對象。然后，我們通過getElementById()方法找到表格的tbody元素，再使用forEach()方法遍歷JSON數據。對于每個商品，我們將其名稱、價格和庫存量拼接成一個完整的表格行，并將其追加到表格中。
以上就是使用Ajax將JSON數據插入表格的方法。我們首先在HTML中創建一個結構良好的表格，然后使用jQuery或純JavaScript的方式發送GET請求獲取JSON數據，并將其逐行插入到表格中。通過這種方式，我們可以靈活地從服務器獲取數據并在前端動態展示給用戶。