使用 Ajax 接收数据并展示到表格 | 完整步骤及代码示例

要使用 Ajax 接收数据并展示到表格上，你可以按照以下步骤进行：\n\n1. 创建一个 HTML 表格，包含表头和一个空的 <tbody> 元素用于展示数据。\n\nhtml\n<table id="myTable">\n <thead>\n <tr>\n <th>列1</th>\n <th>列2</th>\n <th>列3</th>\n </tr>\n </thead>\n <tbody id="tableBody">\n <!-- 这里将用于展示数据 -->\n </tbody>\n</table>\n\n\n2. 使用 JavaScript 编写 Ajax 请求并接收数据。在接收到数据后，将数据插入到表格的 <tbody> 元素中。\n\njavascript\n// 创建一个 XMLHttpRequest 对象\nvar xhr = new XMLHttpRequest();\n\n// 发送 Ajax 请求\nxhr.open("GET", "data.json", true);\nxhr.onreadystatechange = function() {\n if (xhr.readyState === 4 && xhr.status === 200) {\n var data = JSON.parse(xhr.responseText);\n var tableBody = document.getElementById("tableBody");\n\n // 清空表格内容\n tableBody.innerHTML = "";\n\n // 遍历数据并插入到表格中\n for (var i = 0; i < data.length; i++) {\n var row = document.createElement("tr");\n var cell1 = document.createElement("td");\n var cell2 = document.createElement("td");\n var cell3 = document.createElement("td");\n\n // 设置单元格内容\n cell1.innerText = data[i].column1;\n cell2.innerText = data[i].column2;\n cell3.innerText = data[i].column3;\n\n // 将单元格添加到行中\n row.appendChild(cell1);\n row.appendChild(cell2);\n row.appendChild(cell3);\n\n // 将行添加到表格的 tbody 元素中\n tableBody.appendChild(row);\n }\n }\n};\n\n// 发送请求\nxhr.send();\n\n\n3. 修改 URL 中的 "data.json" 为你的数据源的 URL，可以是一个相对路径或绝对路径。\n\n这样，当 Ajax 请求成功返回并解析数据后，数据将被插入到表格的 <tbody> 元素中，从而展示在页面上。