从 AJAX 更新 HTML

Question

我的表格被追加而不是更新。更新html的适当方法是什么。我尝试使用answer from a similar stackoverflow question，但没有成功。

这是我的网页，它使用 Bootstrap 和相关的 ajax：

<div class="bs-component">
  <table class="table table-striped table-hover ">
      <thead>
      <tr>
          <th style="font-size: 25px">Week <span id="week" style="font-size: 28px">1</span></th>
          <th>12 am - 8 am</th>
          <th>8 am - 12 pm</th>
          <th>12 pm - 4 pm</th>
          <th>4 pm - 8 pm</th>
          <th>8 pm - 12 am</th>

      </tr>
      </thead>
      <tbody>
          <script>
          function loadWeek (x) {
            $.post("weekly.php", {p: x}, function (res) {
               //$("tbody").append(res);
               $('#bs-component table > tbody:last').find('tr:first').before(res);
            });
          }
          $(function () {
            loadWeek (1);
          });
          </script>
      </tbody>
  </table>

这里是ajax调用的php回显的html

for ($i = 0; $i < 7; $i++) {
    echo "<tr><td>$weekDays[$i]</td>";
    for ($j = 0; $j < 5; $j++) {
        echo "<td><p>".$usersNames[$i][$j]."</p></td>";
    }
    echo"</tr>";
}

Answer 1

我发现您的 jQuery 代码存在一些小问题。首先，您要将<script> 标记移出表格。它可以在页面中的任何位置，通常位于页面底部（就在结束正文标记</body> 之前）。您想要这样做的原因是，当 Ajax 响应返回时，您想要替换 <tbody> 的内容，这将覆盖您的 <script> 标记。

接下来，您要对响应执行的操作是替换 <tbody> 的内容（而不是追加）。我会重写你的loadWeek函数如下：

function loadWeek(x) {
  $.post('weekly.php', {p: x}, function(res) {
    $('#bs-component tbody').html(res);
  });
}

您可以在https://api.jquery.com/html/ 找到.html() 函数的文档

注意选择器略有不同 - 因为您的 <div> 中只有 1 个 <table>，而该表中只有 1 个 <tbody>，您不必指定最后一个 <tbody>是 <table> 的直系后代（这就是您拥有的选择器的含义）。