中山阿里云代理商：ajax如何表格数据库数据

luotuoemo • 2024年3月10日 04:29 • 阿里云 • 阅读 616

表格可以使用 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