jQuery自动刷新div搞砸了

Question

我有一个脚本可以自动刷新页面上的某个div（我从这里的另一篇文章中得到）

<script type="text/javascript">
    var auto_refresh = setInterval(
    function(){
        $('#refresh').load('index.php?_=' +Math.random()).fadeIn("slow");
    }, 10000); // refresh every 10000 milliseconds
</script>
...............
<div id="refresh">
  <!-- Some PHP Code -->
</div>

这会刷新，但是当它发生时，我会获取整个html文档并将其放入div中。像这样：

正如你所看到的，刷新的div（标记为红色的那个）正在让身体进入它。任何想法???

Answer 1

首先，您将整个页面加载到分隔符中，从而导致文件完全重新加载。相反，您应该从单个文件加载Recent Posts分隔符，即使在第一页加载时也是如此。然后随着时间的推移不断刷新。

其次，您应该将尽可能少的数据从服务器传输到客户端。最多，您应该使用排序的简约校验和（例如，消息数量）来确认客户端和服务器已同步。

最后，如果您选择使用此格式，则可以使用JSON或XML之类的内容传输数据，并让客户端在页面上显示该数据。传输样式化的HTML会增加网络开销，而不是最佳实践。

Answer 2

您正在将整个页面加载到div。 修改代码以仅使用提取的文档的一部分：

    <script type="text/javascript">
        var auto_refresh = setInterval(
        function(){
            $('#refresh').empty();
            $('#refresh').load('index.php?_=' +Math.random()+' #refresh').fadeIn("slow");
        }, 10000); // refresh every 10000 milliseconds
    </script>