Jquery刷新分区

Jquery refresh div

本文关键字：分区 刷新 Jquery      更新时间：2023-09-26

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

目前我正在使用这个，不能很好地工作

<div id="abc">
<?php
?>
</div>
window.setTimeout('location.reload()', 60000);
执行此操作的理想方法是使用jQuery.ajax从服务器检索数据，然后在success函数中使用JavaScript/jQuery更新页面。

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

如果你想每分钟刷新一次div内容，你需要查看jQuery:的setInterval方法和负载

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

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

中

将PHP代码放在另一个页面上（例如：loaddata.PHP），并让jQuery计时器执行加载页面的函数loaddata.PHP

Loaddata.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>

类似这样的东西：

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

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>

对于这些情况，我有时会使用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请求高效，但它完成了任务。

相关文章：