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

问题描述

我一直在关注 stackoverflow 上的各种 jQuery/Ajax 线程来刷新表格而不加载整个页面，但是，这似乎并不能阻止表格重新加载本身。有没有办法只刷新表格值，但不重新绘制表格？

我一直在看的资源-

或多或少，我有一个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 秒重新加载一次。我知道这是因为负载，但我如何只更新值？

标签： javascriptphphtmljquery

考虑以下示例。

$(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 秒运行一次。

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

问题描述

解决方案

推荐阅读