如何在不刷新页面的情况下持续更新 PHP 变量？答案

【问题标题】：How can I continuously update a PHP variable without refreshing a page?如何在不刷新页面的情况下持续更新 PHP 变量？
【发布时间】：2015-02-12 14:59:39
【问题描述】：

我正在制作一个网站，以莫里斯图显示 MySQL 数据库中的数据。基本上，我有一个每分钟获取新测量值的数据库，我试图实时显示这些更改，而无需重新加载整个页面。我已经缩短了这个问题的代码，但这基本上是我所拥有的：

PHP 代码：

<?php
   while($measurement = mysqli_fetch_array($result)){
       $data += $measurement['data'];
   }
?>

还有脚本：

function data() {
        var ret = [];
        ret.push({
          y: 'Today',
          a: <?php echo $data; ?>
        });
      return ret;
    }

var graph = Morris.Bar({
        element: 'graph',
        data: data(),
        xkey: 'y',
        ykeys: ['a'],
        labels: ['random label']
    });

function update() {
      graph.setData(data());
    }

setInterval(update, 60000);

然后图表会显示在 id 为“graph”的 div 中。所以问题是更新函数没有用新数据更新图表，因为 $data 没有得到更新。我听说我可以以某种方式创建一个 PHP 函数并使用 Ajax 持续运行它并让它更新我的 $data 变量，但我不知道该怎么做。

为了更新图表，我必须重新加载整个页面，使用每 60 秒刷新一次页面的元标记可以正常工作，但这似乎是一个糟糕的解决方案。

我还尝试将代码放在单独的 PHP 文件中并使用此代码运行：

var auto_updater = setInterval(
    (function () {
        $("#graph").load("data.php");
    }), 60000);

这也可以正常工作，但问题是它会重绘整个图表，这会导致我网站上的滚动条发疯。我想要的是更新 Morris.Bar 中的数据变量，而不是全部。任何帮助将不胜感激。

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

编辑：因为您只需要一个值，所以您的 json 将只是那个值。虽然从技术上讲这并不能生成有效的 json（顶层应该有一个对象），但它可以与 jquery 一起使用。

PHP: (data.php)

<?php
  $data = // obtain current value of data from somewhere
  echo $data; // should be an integer
?>

JS：

$(document).ready( function () {
  var data = []; // data is empty
  var graph = Morris.Bar({
    element: 'graph',
    data: data
    labels: ['random label']
  });

  function update () {
    $.getJSON( "data.php", function (newv) {
      data.push( { x: newv, y: "Today" } ); // store new value
      graph.setData( data );                // update the graph
    });
  }

  update();
  setInterval( update, 1000 );
});

这就是一切！

不可能“让 PHP 在后台运行”或类似的东西，你的尝试是正确的。但是，您应该加载纯数据（例如作为 JSON 文档），然后通过 JS 将该数据推送到现有数据集中，而不是加载新的 HTML。使用 JS 从服务器抓取更新的数据是通过 AJAX 完成的。

例如，您可以使用$.getJSON

编辑： 完整的 JS 如下所示：

var initial_data = <?php echo $data; ?> // or leave this out and replace with another $.getJSON for clean code!
$(document).ready( function () {
  var graph = Morris.Bar( ... );

  setInterval( function () {
    $.getJSON( "data.php", function (data) {
      graph.setData( data );
    });
  }, 1000 );
});

PHP 的响应应该是这样的：

[
  { "x": 10, "y": 20 },
  { "x": 3, "y": 12 },
  { "x": 8, "y": 19 }
]

所以 PHP 可能看起来像这样：

[
  <?php
    // first one seperately because it can't have a leading comma - JSON is strict
    $measurement = mysqli_fetch_array($result)
    echo '{ "x": ' . $result["data"]["x"] . ', "y": ' . $result["data"]["x"] . ' }';
    while($measurement = mysqli_fetch_array($result)) {
     // no idea what data looks like, I'm assuming it has x and y properties
     echo ', { "x": ' . $result["data"]["x"] . ', "y": ' . $result["data"]["x"] . ' }';
    }
  ?>
]

【讨论】：

感谢您的回答，但我不确定在 data.php 中包含什么，因为我不知道 JSON 或如何让 PHP 返回类似的内容。我知道如何制作整个东西，但不知道如何只返回这样的数据。我是否只是从我的帖子中创建一个类似于 data() 的函数并在 data.php 或类似的东西中调用它？
只需在您的服务器上添加一个文件data.php，它可以像以前一样获取数据，echos 采用我在第二个代码块中显示的格式（不要返回任何 HTML，只是那个 JSON 片段）
我只是将整个内容作为字符串回显吗？如何在不将它们变成字符串的情况下回显括号？
我把data.php的全部内容都放上去了，除了数据库连接和查询。
我刚刚意识到你只需要一个更新的值，那就是 y 一个，而 x 会随着时间的推移而变化。我会很快草拟一个解决方案

【解决方案2】：

尝试将所有 PHP 放在一个单独的脚本中，并让它返回 PHP 数组中的表（使用 json_encode()）

这样，您可以使用 javascript 重新绘制表格，如下所示：

var getTableData = function(){
  $.getJSON("data.php").done(function(data){

    // code to generate html from JSON data

    $("#graph").html(tableHTML) // puts the html table into the document

    setTimeout(getTableData, 2000); // interval
  });
};
setTimeout(getTableData, 0);

我不确定您的数据是如何格式化的，所以您需要自己创建 html！

【讨论】：

这可能会一直滞后 - 你仍然重建完整的 DOM。

【解决方案3】：

您将不得不使用某种 ajax 调用来更新服务器上的值。此外，在更新值后，您必须将其保存在某个地方，例如数据库或缓存中，因为当 PHP 运行结束时，该进程将终止，并且您在 PHP 运行时创建的所有数据都将丢失

【讨论】：