Question

我有一个带有div的HTML页面，其中包含一个php变量的值，该变量来自mysql查询。我希望div能够自动刷新，以便从SQL查询中查看任何新数据。我搜索了一周的正确代码，但没有... div代码如下：

<div id="last10">   
    <table width="838" cellpadding="1" cellspacing="1" class="categorie1"> 
        <tr style='font: bold 12px verdana;'> 
            <td width="149" align="center">Browser</td>
            <td width="99" align="center">OS</td>
            <td width="248" align="center">Date</td>
            <td width="103" align="center">IP</td>
            <td width="108" align="center">Country</td>
            <td width="110" align="center">Referrer</td> 
        </tr>
        {$recent_visits}        
    </table>
</div>

Answer 1

PHP是服务器端语言，HTML和JavaScript是客户端语言。因此，您需要使用AJAX使用PHP

更新HTML / JavaScript中的某些数据

Answer 2

如果您想要抵制整页刷新，则需要使用AJAX。基本步骤：

创建新页面或当前页面的特定功能，仅用于检索新值。这可以是get_recent_visits_count.php或current_page.php?get_recent_visits。
查找进行AJAX调用（我建议使用jQuery的get以简化）并撤销值
将该值放在页面上。
一旦您能够获取信息，请将该代码放在setInterval（或类似）中，并定期刷新。

如果您想将代码保留在同一页面上，请尝试以下内容（添加到页面顶部）：

<?php
  if (isset($_GET['get_recent_visits']))
  {
    // query your DB for just the numeric value and echo it here.
    exit;
  }
?>

然后，在您的HTML页面中尝试以下内容：

1，将要填充的元素放在页面上的新值中：

<span id="recent-visits"></span>

然后，在您网页的<head>部分中，您需要包含jQuery和ajax代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
  // wait for document to be ready
  $(function(){

    // make the code execute every so many seconds (time assigned at bottom)
    setInterval(function(){

      // make the ajax call to the same page, passing it the GET variable so
      // it only echos the number we want
      $.get('<?php echo $_SERVER['REQUEST_URI']; ?>?get_recent_visits',function(num){

        // echo that number we just retrieved to the span we placed on the page
        $('#recent-visits').text(num);

      });

    }, 30 * 1000); // run every 30 seconds

  });
</script>

以上只是让一个数字显示在页面上的简单方法，但应该让你的脚湿透。 PHP提供了使用json_encode转储JSON对象的功能，可以与jQuery的.getJSON配对以返回更复杂的对象。

Answer 3

如果您希望数据自动刷新，则必须使用一些ajax魔法。真的需要更多的信息。什么是$ recent_visits？

Answer 4

前一段时间，我需要为自己的项目提供类似的服务。我知道我来晚了一点，但是我希望这可以帮助其他人寻找相同的解决方案。

首先，制作一个文件。我们称之为data.php。该文件应包含所有从数据库检索数据的代码，在这里您可以将任何相关数据放入变量中。这是我自己的项目中的一些示例代码：

<?php
$cpu_load = sys_getloadavg();
$total_storage = disk_total_space("/");
$free_storage = disk_free_space("/");
$public_ip = file_get_contents("public_ip.txt");
?>

此代码所做的全部是它设置变量，并且这是将定期刷新的唯一位。您还需要在此处添加DIV的内容（尽管没有DIV标签）。这部分应该看起来像这样（显然替换了我的示例变量）：

<table width="838" cellpadding="1" cellspacing="1" class="categorie1"> 
    <tr style='font: bold 12px verdana;'> 
        <td width="149" align="center">Average CPU Load: <?php echo $cpu_load; ?></td>
        <td width="99" align="center">Total Storage: <?php echo $total_storage; ?></td>
        <td width="248" align="center">Free Storage: <?php echo $free_storage; ?></td>
        <td width="103" align="center">Public IP: <?php echo $public_ip; ?></td>
    </tr>       
</table>

接下来，在您的主页中，您可以使用类似以下的内容：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {

  $("#refresh").click(function() {
     $("#last10").load("data.php");

    return false;
    });
});
function refresh() {
$("#refresh").click();  
}
setInterval(refresh, 100);
</script>
<a href="#" id="refresh" hidden="">Refresh</a>
<div id="last10"></div>

这只是创建一个隐藏链接，然后单击它以刷新div。

我认为这应该可以回答您的问题。在评论中询问是否需要任何澄清。希望这对某些人有帮助：）

在html页面中自动刷新php变量

4 个答案: