Question

我正在尝试加载表中的所有数据，并定期检查是否删除和/或添加了一些数据并更新表。这听起来很简单，但我不能让它发挥作用。

问题是我在<tbody id='result'></tbody>内没有得到任何东西。在控制台中，我看到PHP的正确响应。到目前为止，我有这个功能：

$(document).ready(function() {
  setInterval(function() {                  
    $.ajax({
      url:'db.php',
      dataType:'json',
      type:'get',
      success:json,
    });

    function json(data){
      $("#result").empty();
      $(data).each(function(index, value)  {
        var table = '<tr><td>' + value.test_name + '</td><td>' + value.test_number + '</td><td>' + value.test_spec + '</td></tr>';
        $('#data').append( table );
      });
    }
  }, 9000);
});

<table class="table" id="data">
  <thead>
    <tr>
      <th>Name</th>
      <th>Number</th>
      <th>Spec</th>
    </tr>
  </thead>
  <tbody id='result'></tbody>
</table>

$sql = "SELECT * FROM test_data";
$data = $db_con->query($sql);
$data->execute();

foreach($data as $row))
{   
    echo "<tr>
        <td align=center>'".$row['test_id']."'</td>
        <td align=center>'".$row['test_name']."'</td>
        <td align=center>'".$row['test_number']."'</td>
        <td align=center>'".$row['test_spec']."'</td>
    </tr>";
}

这是输出：

<tr>
    <td align=center>'1'</td>
    <td align=center>'Test 1'</td>
    <td align=center>'1'</td>
    <td align=center>'EAZ334'</td>
</tr>
<tr>
    <td align=center>'2'</td>
    <td align=center>'Test 2'</td>
    <td align=center>'2'</td>
    <td align=center>'EAZ332'</td>
</tr>
<tr>
    <td align=center>'3'</td>
    <td align=center>'Test 3'</td>
    <td align=center>'3'</td>
    <td align=center>'EAZ331'</td>
</tr>
<tr>
    <td align=center>'4'</td>
    <td align=center>'Test 4'</td>
    <td align=center>'4'</td>
    <td align=center>'EAZ339'</td>
</tr>
<tr>
    <td align=center>'5'</td>
    <td align=center>'Test 5'</td>
    <td align=center>'5'</td>
    <td align=center>'EAZ337'</td>
</tr>

有谁能告诉我为什么这不起作用？

Answer 1

而不是使用$('#data').append( table ); $('#result').html( table );

像这样更新你的jquery每个循环。首先，构建完整的HTML字符串＆amp;最后使用“ID”更新整个HTML字符串。

var table = '';
$(data).each(function(index, value)  {
    table += '<tr><td>' + value.test_name + '</td><td>' + value.test_number + '</td><td>' + value.test_spec + '</td></tr>';
});

$('#data').append( table );

Answer 2

您的服务器端代码返回的是HTML而不是JSON。因此，您只需要使用服务器的响应替换表中的内容：

$(document).ready(function() {
    setInterval(function() {                  
        $.ajax({
            url: 'db.php',
            type: 'get',
            success: function (data) {
                $('#result').html(data);
            },
        });
    }, 9000);
});

在X分钟的Ajax重载表返回未知

2 个答案: