jQuery刷新div答案

【问题标题】：Jquery refresh divjQuery刷新div
【发布时间】：2013-08-05 15:03:31
【问题描述】：

我在一个 div 中有一个特定的 php 代码，它从 mysql 获取数据。我希望这个 div 每分钟刷新一次，而不刷新整个页面。

目前我在用这个，效果不好

<div id="abc">
<?php

?>
</div>

window.setTimeout('location.reload()', 60000);

【问题讨论】：

你必须使用 Ajax。
... 或 iframe，不推荐。
@undefined 实际上，当 iframe 拥有自己的样式表时，它有时是唯一的选择。

标签： php javascript jquery settimeout

【解决方案1】：

执行此操作的理想方法是使用 jQuery.ajax 从您的服务器检索数据，然后在您的 success 函数中使用 JavaScript/jQuery 更新您的页面。

您仍然可以使用setTimeout 或等效项来定期发出 AJAX 请求。

【讨论】：

setTimeout 应该在 success 函数内调用以避免堆叠失败或意外的长请求。

【解决方案2】：

当你想每分钟刷新一次 div 内容时，你需要查看 jQuery 的 setInterval 方法和 load：

window.setInterval(function(){
  $('#abc').load('PHPFile.php');
}, 1000);

并且您在加载方法的 url 部分中提到的 PHP 脚本必须能够提供 HTML 格式的结果，该结果将被放置在给定的 div (id:abc) 中

【讨论】：

【解决方案3】：

在另一个页面上有 PHP 代码（例如；loaddata.php）并有一个 jQuery 计时器执行加载页面的函数 loaddata.php

加载数据.php

<?php
    echo "Hello World!";    
?>

index.php

<div id="data"></div>

<script>
    $('#div').load("loaddata.php", function() {
        window.setInterval("loadData", 60000);
    });

    function loadData()
    {
        $('#div').load("loaddata.php");
    }
</script>

【讨论】：

【解决方案4】：

类似这样的：

function refreshContent() {
    $.post(urlHere, { data here...}, success(data) {
        //...manipulate DOM here...
    }
}

setTimeout(refreshContent, 60000);

【讨论】：

【解决方案5】：

jQuery Ajax 示例

file1.php

<?php
  echo 'PHP content e.g. from database based on submitted request - '.$_POST['my-value'];
?>

file2.html

<div class="content"></div>
<a href="#" class="reload-data"> Refresh div </a>

<script>
$(function(){
  $(".reload-data").click(function(){
    $.post("file1.php", {my-value: "something"}, function(data){
      $(".content").html(data);
    });
  });
});
setTimeout(function(){$(".reload-data").click();}, 60000);
</script>

【讨论】：

【解决方案6】：

对于这些情况，我有时会使用jQuery.load()

文档示例：

<div id="result"></div>
<script type="text/javascript">
function refreshDiv() {
    $('#result').load('ajax/test.html #container', function(){ /* callback code here */ });
}
setInterval(refreshDiv, 10000);
</script>

执行以下操作：

检查#result 元素是否在当前页面中
如果是，则向ajax/test.html页面发出请求
从响应中获取#container，并将其转储到#result
它每 10 秒执行一次

就是这样。一行代码，虽然没有真正的 ajax 请求那么高效，但它完成了工作。

【讨论】：