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

【问题标题】：Refresh only the values of a table with jQuery/Ajax without reloading the page仅使用 jQuery/Ajax 刷新表的值而不重新加载页面
【发布时间】：2021-11-19 17:31:39
【问题描述】：

我一直在关注 stackoverflow 上的各种 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>

<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 您或其他人能否提供您所说的作为答案？我会接受的。很有帮助。

标签： javascript php html jquery

【解决方案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 秒运行一次。

【讨论】：

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