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

Question

我有一个 HTML 页面，其中的 div 包含 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。基本步骤：

1. 创建一个新页面或当前页面的特定函数，以检索新值。这可以是 get_recent_visits_count.php 或 current_page.php?get_recent_visits。
2. 查找进行 AJAX 调用（为了简单起见，我建议使用 jQuery 的 get ）并检索值
3. 将该值放置在页面上。
4. 获得信息后，将该代码放入 setInterval< /a> （或类似）并定期刷新。

---

如果您想将代码保留在同一页面上，请尝试这样的操作（添加到页面顶部）：

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

然后，在您的 HTML 页面中尝试如下操作：

1st，放置一个要使用新值填充的元素在页面上：

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

然后，在页面的 部分中，您需要包含 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。

我想这应该可以回答你的问题。如果您需要任何说明，请在评论中询问。希望这对一些人有帮助:)