jQuery 如何使用jQuery ajax自动刷新/更新表格

在本文中，我们将介绍如何使用jQuery ajax通过使用json或html文件来自动刷新/更新表格。

介绍

在Web应用程序中，我们经常需要在不刷新整个页面的情况下更新某些内容。jQuery是一个非常流行的JavaScript库，可以简化页面上各种操作的编程。使用jQuery的ajax功能，我们可以实现自动刷新/更新表格，从而提升用户体验。

使用jQuery ajax和JSON文件

首先，我们来看如何使用jQuery ajax和JSON文件来自动刷新/更新表格。

创建一个HTML表格，并为其指定一个唯一的ID。

<table id="myTable">
 <thead>
   <tr>
     <th>Name</th>
     <th>Age</th>
     <th>City</th>
   </tr>
 </thead>
 <tbody>
   <!-- 此处的表格行将在自动刷新/更新时被替换 -->
 </tbody>
</table>

在页面中引入jQuery库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

使用jQuery的ajax函数来加载和解析JSON文件，并更新表格。

$(document).ready(function() {
 function refreshTable() {
   $.ajax({
     url: "data.json",
     dataType: "json",
     success: function(data) {
       // 清空表格内容
       $("#myTable tbody").empty();
       // 遍历json数据并添加到表格中
       $.each(data, function(index, item) {
         var row = "<tr><td>" + item.name + "</td><td>" + item.age + "</td><td>" + item.city + "</td></tr>";
         $("#myTable tbody").append(row);
       });
     }
   });
 }

 // 页面加载时刷新表格
 refreshTable();

 // 每隔5秒刷新表格
 setInterval(refreshTable, 5000);
});

在服务器端创建一个返回JSON数据的文件（例如data.json），并确保JSON数据的格式正确。

[
 {
   "name": "John",
   "age": 25,
   "city": "New York"
 },
 {
   "name": "Alice",
   "age": 30,
   "city": "London"
 },
 {
   "name": "Bob",
   "age": 35,
   "city": "Paris"
 }
]

确保将HTML文件和JSON文件部署到同一服务器上，并在HTML文件中正确指定JSON文件的路径。
运行HTML文件，您将看到表格每5秒自动刷新/更新一次，显示最新的JSON数据。

使用jQuery ajax和HTML文件

除了使用JSON文件，我们还可以使用HTML文件来实现自动刷新/更新表格。

创建一个HTML表格，并为其指定一个唯一的ID。

<table id="myTable">
 <thead>
   <tr>
     <th>Name</th>
     <th>Age</th>
     <th>City</th>
   </tr>
 </thead>
 <tbody>
   <!-- 此处的表格行将在自动刷新/更新时被替换 -->
 </tbody>
</table>

在页面中引入jQuery库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

使用jQuery的ajax函数来加载并更新表格。

$(document).ready(function() {
 function refreshTable() {
   $.ajax({
     url: "data.html",
     dataType: "html",
     success: function(data) {
       // 更新表格内容
       $("#myTable tbody").html(data);
     }
   });
 }

 // 页面加载时刷新表格
 refreshTable();

 // 每隔5秒刷新表格
 setInterval(refreshTable, 5000);
});

在服务器端创建一个返回包含最新表格内容的HTML文件（例如data.html）。

<!-- 示例 HTML 文件片段 -->
<tr>
 <td>John</td>
 <td>25</td>
 <td>New York</td>
</tr>
<tr>
 <td>Alice</td>
 <td>30</td>
 <td>London</td>
</tr>
<tr>
 <td>Bob</td>
 <td>35</td>
 <td>Paris</td>
</tr>