仅使用 jQuery/Ajax 刷新表的值而不重新加载页面

Posted 2023-05-07

【中文标题】仅使用 jQuery/Ajax 刷新表的值而不重新加载页面

【英文标题】：Refresh only the values of a table with jQuery/Ajax without reloading the page

【发布时间】：2021-11-19 17:31:39

【问题描述】：

我一直在关注 *** 上的各种 jQuery/Ajax 线程，用于在不加载整个页面的情况下刷新表格，但是，这似乎并不能阻止表格自行重新加载。有没有办法只刷新表格值，但不重绘表格？

我一直在查看的资源-

How to refresh table contents in div using jquery/ajax

Redraw datatables after using ajax to refresh the table content?

或多或少，我有一个显示我的表格的 getTable.php 页面，没有其他内容：没有页眉、页脚等。

PHP (getTable.php) - 这是服务器端代码（asp、html 等）

<?php
    echo '<table><tr><td>TEST</td></tr></table>';
?>

然后，在我的 JS 中，我使用 load() 方法刷新表格：

HTML

<div id="tableHolder"></div>

JS

<script type="text/javascript">
    $(document).ready(function()
      refreshTable();
    );

    function refreshTable()
        $('#tableHolder').load('getTable.php', function()
           setTimeout(refreshTable, 10000);
        );
    
</script>

整个表每 10 秒重新加载一次。我知道这是因为负载，但我如何只更新值？

【问题讨论】：

您将只想从 PHP 中收集值而不是整个 HTML。这样您就可以加载表格正文而不是整个表格。例如，只需从 PHP 中获取 JSON，然后在 jQuery 中创建一个函数来清除和重绘表格内容。

您必须返回数据（行、值）而不是 HTML 标记。 JSON 数据结构是一个不错的选择。再加上你的 JS 上的一个循环，几个选择器，你就开始做生意了。我认为您需要进一步调查/了解。

您还可以利用DataTables，它正好解决了这个用例。

了不起的家伙！感谢您的所有回复。我要再试一次。

@Twisty 您或其他人能否提供您所说的作为答案？我会接受的。很有帮助。

【参考方案1】：

考虑以下示例。

$(function() 
  function makeTable(data, target) 
    var table = $("<table>");
    $("<thead>").appendTo(table);
    $("<tbody>").appendTo(table);
    // Build Header
    var headers = Object.keys(data[0]);
    $("<tr>").appendTo($("thead", table));
    $.each(headers, function(i, v) 
      $("<th>").html(v).appendTo($("thead > tr", table));
    );
    // Build Body
    $.each(data, function(i, r) 
      var row = $("<tr>").appendTo($("tbody", table));
      $.each(r, function(j, c) 
        $("<td>").html(c).appendTo(row);
      );
    );
    if (target == undefined) 
      return table;
     else 
      table.appendTo(target);
    
  

  function updateTable(target, rows) 
    var body = $("tbody", target);
    var row;
    body.empty();
    $.each(rows, function(i, r) 
      row = $("<tr>").appendTo(body);
      $.each(r, function(j, c) 
        $("<td>").html(c).appendTo(row);
      );
    );
  

  var myTableData = [
    "fruit": "apple",
    "price": 1.50,
    "quantity": 3
  , 
    "fruit": "banana",
    "price": 0.75,
    "quantity": 20
  , 
    "fruit": "dragonfruit",
    "price": 3,
    "quantity": 1
  ];

  var newTableData = [
    "fruit": "apple",
    "price": 1.50,
    "quantity": 2
  , 
    "fruit": "banana",
    "price": 0.95,
    "quantity": 20
  , 
    "fruit": "grapes",
    "price": 2.40,
    "quantity": 12
  ]

  makeTable(myTableData, "#tableHolder");

  var timer = setInterval(function() 
    updateTable("#tableHolder", newTableData)
  , 10 * 1000);
);

#tableHolder table 
  width: 100%;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tableHolder"></div>

这使用一个函数来构建基于 JSON 数据的表。它从提供的数据中提取标题并构建行。因此，您需要更新您的 PHP 代码，使其更像 API，并根据请求提供 JSON 数据而不是 HTML 数据。

第二个函数非常相似，只是它只是擦除行并重新写入。

然后我可以使用setInterval 每 10 秒运行一次。

查看更多：https://www.w3schools.com/jsref/met_win_setinterval.asp

【讨论】：

谢谢！我现在就试试这个。