如何自动刷新div标签以从在线成员的数据库中检索数据?

时间:2014-03-26 04:35:25

标签: javascript php html

我想找一些可以在div标签上每30秒自动刷新的源代码。我认为只有javascript可以完成。我很困惑如何做到这一点。谁能告诉我我该怎么办?

这是我的PHP代码:

<?php $sql = $getUser->getuser(); 
      if ($rs = $db->Execute($stmt)) { 
          $arrResult = array(); 
          while($rsa = $rs->FetchRow()) { 
              array_push($arrResult, array("username" => $rsa['username'] )); 
          } 
      } 
?>   

这是我的html中的div标签,它将显示在线用户

     <body onload="timer = setTimeout('auto_reload()',10000);">
<{section name=thisrsa loop=$rsa max=$max}>
    <div>
    <td><{$rsa[thisrsa].username}></td>
    </div>
    <{/section}>

它将在html页面中的一个站点上显示如下:

-----------
|jimmy    |
|Anderson |
|simon    |
|vincent  |
-----------

这是我用来控制我的div

<script>
var timer = null;
function auto_reload()
{
    window.location = 'http://domain.com/page.php';
}
</script>

4 个答案:

答案 0 :(得分:0)

由于您获取数据的PHP代码在同一页面上,您需要每隔30秒刷新一次页面以获取可以通过这种方式完成的最新数据:

window.setInterval(function(){window.location = window.location.href},30000);

如果您的PHP代码检索数据是在下一页,您可以简单地向该页面发出ajax请求以获取更新的数据并使用新数据更新div

 window.setInterval(function(){//ajax request //},30000);

答案 1 :(得分:0)

我不知道这个示例代码是否会在您的项目中正常运行。但如果你不觉得麻烦。如果你有空闲时间,可以试试这段代码。

<html>
<body>
<script type="text/javascript">
function Ajax(){
var xmlHttp;
    try{    
        xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
    }catch (e){
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
        }catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                alert("No AJAX!?");
                return false;
            }
        }
    }
    xmlHttp.onreadystatechange=function(){
        document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
        setTimeout('Ajax()',2000);
    }
    xmlHttp.open("GET","text.txt",true);
    xmlHttp.send(null); 
}
window.onload=function(){
    setTimeout('Ajax()',2000);
}
</script>
<div id="ReloadThis">Default text</div>
</body>
</html> 

答案 2 :(得分:0)

实现JQuery / Javascript的一种可能的解决方案:

首先,创建一个单独的PHP页面,它将回显/包含您希望填充div的数据。

然后在您的主页面中,您可以使用JQuery / Javascript创建一个函数,该函数将div的innerhtml设置为此单独页面的内容,并通过使用{{1}递归调用自身每30秒刷新一次div }。

setTimeout

要执行此操作,您需要将JQuery min文件导入到您的页面中。您可以在“http://jquery.com/download/”下载此内容。 然后,您可以通过包含以下HTML将其导入到您的页面中:

<script> function reloadData() { $('#divIDHere').load("separatePage.php"); setTimeout(function() {reloadData(); }, 30000); } </script>

现在你有一个单独的页面可以将你想要的数据回显到你的div和一个JQuery / Javascript函数,它将div的内容设置为等于单独的页面并每隔30秒刷新div。

剩下要做的就是让页面调用您创建的功能。这可以通过包含以下HTML来完成:

<script src="jquery-1.10.2.min.js"></script>

答案 3 :(得分:0)

要使用此代码,您的php文件必须回显

<?php $sql = $getUser->getuser(); 
      if ($rs = $db->Execute($stmt)) { 
          $arrResult = array(); 
          while($rsa = $rs->FetchRow()) { 
              $output.=$rsa['username']."<br>"; 
          } 

          echo $output;
      } 
?>

HTML - 响应将显示在#logins

<html>
<body>
<script type="text/javascript">

$(document).ready(function(){
Ajax();
setTimeout('Ajax()',30000);

function Ajax(){
    $.post("ligin_check.php", { //This whoulb be youe php file

    })
    .done(function(data) {
        $("#logins").html(data);

    }).fail(function() {
        ("#logins").html( "error" );
    });

}

});



</script>
<div id="logins">Waiting...</div>
</body>
</html>