Javascript 使用Jquery刷新DIV复制整个页面

我希望我的PHP页面每“n”秒刷新一次指定的DIV

代码：

//功能
//功能
函数show_data（）
{
$（'#refreshData'）.load（'main.php）；
}
setInterval（'show_data（）'，5000）；

但刷新后，整个主体将在main.php文件中复制两次。

请尝试以下操作：-

<div class="result"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    function refresh_div() {
        jQuery.ajax({
            url:'YOUR PHP page url',
            type:'POST',
            success:function(results) {
                jQuery(".result").html(results);
            }
        });
    }

    t = setInterval(refresh_div,1000);
</script>

函数refresh_div（）{
jQuery.ajax({
url:“您的PHP页面url”，
类型：'POST'，
成功：功能（结果）{
jQuery（“.result”）.html（结果）；
}
});
}
t=设置间隔（刷新分区，1000）；

---

“您的PHP页面url”应包含您希望在主页上显示的内容。

PHP解决方案

为了实现这一点，

main.php

必须只返回div的内容。这意味着它需要检测何时呈现整个页面或仅呈现div的内容。 有几种方法可以做到这一点

为AJAX请求创建一个单独的php文件，该文件总是 返回页面的该部分

将HTTP\u X\u请求的\u与标题一起使用 检测AJAX请求的步骤

如果（！empty（$_SERVER['HTTP\u X\u REQUESTED\u WITH']）&& strtolower（$\u服务器['HTTP\u X\u请求的\u，带']）='xmlhttprequest'） { //如果您到达这里，这是一个AJAX请求。请确保只呈现div的内容。 }

类似于一个。添加一个查询字符串参数，而不是创建一个单独的PHP文件，这样页面 将知道它只应返回该部分。您甚至可以在查询字符串中指定哪个部分，这样您就可以在不同的时间间隔内通过同一个php文件加载不同的部分

JavaScript解决方案

或者，您可以获取整个页面，并使用jQuery从中提取div的内容。已经有了用于此目的的方便语法

.load（）方法允许我们指定 要插入的远程文档。这是通过一种特殊的方法实现的 url参数的语法。如果有一个或多个空格字符 包含在字符串中，字符串中第一个 空间被假定为确定内容的jQuery选择器 待加载

load函数允许在url之后有一个额外的选择器，匹配该选择器的内容从AJAX响应中获取并插入到文档中的指定元素中。因此，id应该不同，否则将在现有元素中插入具有相同id的元素，这是不允许的

因此，您的HTML应该如下所示：

<div id="refreshDataContainer">
  <div id="refreshData">
  </div>
</div>

---

main.php是这个javascript所在的文件吗？如果

main.php

返回整个页面，那么它的全部内容将再次呈现在这个div中<如果请求是AJAX请求，则code>main.php应仅呈现div的新内容，或者JavaScript应该足够聪明，可以从中提取内容并只使用该部分。@GolezTrol是的，整个main.php被呈现到#refreshData中。如何克服它？您应该只加载所需的数据，而不是整个页面，正如GolezTrol提到的，它将添加包括脚本在内的额外元素。因此，每次你的间隔运行时，你都在添加另一个间隔。比如说25秒后，您将有32个间隔运行OK，但请告诉我克服这一点的确切方法谢谢您提供的信息。但是您是否可以按照第一个方法

load（）

中指定的那样使用AJAX指定代码已经执行了AJAX请求。方法1的解决方案不是调用

main.php

，而是另一个url，它只返回div的内容。例如

main\u refreshdata.php

。或者（如3所示）可以调用

main.php？part=refreshdata

，这样main.php就会知道is应该只呈现新内容，而不是整个页面。这三个解决方案中的每一个都需要对服务器端（PHP）代码进行更改。从您的回答来看，您似乎在理解PHP部分方面存在一些问题，因此我认为JavaScript解决方案可能是目前最好的。幸运的是，

load（）

函数已经允许您非常轻松地执行此操作。我在答案中添加了一个解释，向您展示了如何操作。是的，我尝试过，但#refreshData会更改其位置。如果您的PHP页面url仅返回该部分，则没有理由使用此替代方法通过OP已经使用的

load

方法执行请求。OP的当前代码已经在执行此操作。jQuery的.load方法是这种代码的快捷方式。OP的问题是，他们正在加载的页面与javascript是同一个页面，因此每个调用都会添加另一个javascript，该javascript将在同一个页面中反复加载

<div id="refreshDataContainer">
  <div id="refreshData">
  </div>
</div>

$('#refreshDataContainer').load('main.php #refreshData');