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

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

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

最后，如果您选择使用这种格式，则希望以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>