表格可以使用 HTML 和 JavaScript 来实现，而 AJAX 则可以实现异步加载数据并动态地将其显示在表格中。以下是一个简单的示例代码来表格数据库数据：
HTML：
<table id="myTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Loading...</td>
</tr>
</tbody>
</table>JavaScript：
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
var tableBody = document.getElementById("myTable").getElementsByTagName("tbody")[0];
// 清空表格
tableBody.innerHTML = "";
for (var i = 0; i < data.length; i++) {
var row = tableBody.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].email;
}
}
};
xmlhttp.open("GET", "getdata.php", true);
xmlhttp.send();在上面的代码中，我们使用了 AJAX 来获取来自 getdata.php 的数据。一旦数据得到了返回，我们解析 JSON 数据并将其填充到表格中。
注意：本示例需要后端脚本提供接口（如 getdata.php），并以 JSON 格式返回所需数据。
实现
要使用Ajax表格来显示数据库数据，您需要进行以下步骤：
- 编写服务器端脚本来从数据库中检索数据。
- 将检索到的数据格式化为JSON对象。
- 使用AJAX请求从服务器端获取JSON数据。
- 在客户端使用JavaScript解析JSON数据并在表格中显示它。
下面是一个简单的示例，演示如何使用AJAX表格从MySQL数据库检索数据。
- 服务器端代码（使用PHP）
<?php
// 连接到数据库
$con = mysqli_connect(“localhost”, “my_user”, “my_password”, “my_db”);
// 检索数据
$result = mysqli_query($con, “SELECT * FROM my_table”);
// 格式化数据为JSON
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
$rows[] = $r;}
echo json_encode($rows);
mysqli_close($con);
?>
- 客户端代码（使用jQuery）
$(document).ready(function() {
$.ajax({
url: "data.php",
dataType: "json",
success: function(data) {
// 在表格中显示数据
var tbl_body = "";
$.each(data, function() {
var tbl_row = "";
$.each(this, function(k , v) {
tbl_row += "<td>"+v+"</td>";
})
tbl_body += "<tr>"+tbl_row+"</tr>";
})
$("#my_table tbody").html(tbl_body);
}
});});
在这个例子中，服务器端代码使用PHP来检索MySQL数据库中的数据，并将其格式化为JSON对象。
客户端代码使用jQuery的AJAX功能来从服务器端获取JSON数据，并使用JavaScript来解析它并将其显示在表格中。
请记住，这只是一个简单的示例。在实际应用中，您需要考虑数据格式、表格样式，以及安全性等问题。
发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/158954.html
