javascript - 如何只更新 php/mysql 生成的表的一列而不重新加载页面/表？

Question

因此，我使用 php 从 mysql 表获取数据来生成以下 HTML 表。我想要做的是使用 ajax 不断更新最后一行，这样表就不会重新加载整个表。

<tbody>
                    <?php while($row = MySQL_fetch_array($result)):
                    $id = htmlentities($row['id']);
                    $status = htmlentities($row['status']);
                    include ("button.php");
                    ?>
                    <tr>
                        <td title="lname" width="100px">
                            <div style="width:100px; overflow:hidden;">
                                <?php echo(htmlentities($row['last_name'])); ?>
                            </div>
                        </td>
                        <td width="100px">
                            <div style="width:100px; overflow:hidden;">
                                <?php echo(htmlentities($row['first_name'])); ?>
                            </div>
                        </td>    
                        <td width="100px">
                            <div style="width:100px; overflow:hidden;">
                                <?php echo(htmlentities($row['u_name'])); ?>
                            </div>
                        </td>  
                        <td width="100px">
                            <div style="width:150px; overflow:hidden;">
                                <?php echo(htmlentities($row['skype_id'])); ?>
                            </div>
                        </td>
                        <td width="100px">
                            <div style="width:100px; overflow:hidden;">
                                <?php echo(htmlentities($row['primary_location'])); ?>
                            </div>
                        </td>
                        <td>
                            <div style="width:100px; overflow:hidden;">
                                <?php echo(htmlentities($row['phone'])); ?>
                            </div>
                        </td>
                        <td>
                            <div style="width:100px; overflow:hidden;">                                     
                                <?php echo '<div><div id="r'.$id.'"><div id="test"><img class="rating" id="'.$status.$id.'" src="'.$color.'"><div style="display:none;">'.$status.'</div></div></div></div>';?>
                            </div>
                        </td>
                    </tr>                       
                    <?php endwhile; ?>
                </tbody>

我尝试执行以下操作:

<script>
$(document).ready(function(){
  refreshTable();
});

function refreshTable(){
    $('#test').load('response.php', function(){
       setTimeout(refreshTable, 5000);
    });
}
</script>

response.php 再次执行了整个 while 循环。问题如下:

1) 几秒钟后，页面会变得越来越慢......响应速度越来越慢。很快它就会戛然而止。我不知道为什么。

2) 刷新可见。每次刷新时，所有表格突出显示都会闪烁一会儿。

所以我想，也许如果我只是尝试刷新一栏......它不会慢慢停止？然而，每次我尝试更新专栏都会破坏一切，我的所有脚本都会停止工作。而且我不知道如何解决刷新时表格突出显示消失的问题。我怎样才能让这一切发挥作用？

谢谢!

Answer 1

向 URL 发出 ajax 请求，该请求仅返回 json(或 html，当然由 <tr> 标签包围)格式的最后一行。然后，使用 JavaScript 替换最后一行。