自动刷新 html 页面中的 php 变量答案

【问题标题】：Auto refresh a php variable in html page自动刷新 html 页面中的 php 变量
【发布时间】：2011-10-18 11:21:00
【问题描述】：

我有一个带有 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>

【问题讨论】：

标签： php html refresh

【解决方案1】：

PHP 是一种服务器端语言，HTML 和 JavaScript 是客户端语言。因此，您需要使用 AJAX 来使用 PHP 更新 HTML/JavaScript 中的一些数据

【讨论】：

我明白这一点。我搜索并尝试了许多ajax代码，但没有任何效果......我是编程新手，这就是我寻求帮助的原因

【解决方案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 页面中尝试以下操作：

第一，在页面上放置一个你想用新值填充的元素：

<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 配对以返回更复杂的对象。

【讨论】：

我试过这个步骤，但正如我所说，我只是一个菜鸟......没有经验。演示代码对我有很大帮助
@user：看我的回答。我正在为您制作一个演示，但想先发布前提。 ;-)

【解决方案3】：

如果您希望数据自动刷新，您将不得不使用一些 ajax 魔法。确实需要更多信息。 $recent_visits 是什么？

【讨论】：

有点长的文字，但这里是定义的：

【解决方案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。

我认为这应该回答您的问题。如果您需要任何澄清，请在 cmets 中询问。希望这可以帮助一些人:)

【讨论】：