javascript – 如何在不刷新页面的情况下不断更新PHP变量？

我正在建立一个网站,显示Morris图中MySQL 数据库的数据.基本上我有一个数据库,每分钟都有新的测量数据,我试图在不重新加载整个页面的情况下显示这些更改.我缩短了这个问题的代码,但这基本上就是我所拥有的：

<?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中的数据变量,而不是整个过程.任何帮助,将不胜感激.

解决方法:

编辑：因为你只需要一个值,你的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"] . ' }';
    }
  ?>
]

javascript – 如何在不刷新页面的情况下不断更新PHP变量？

相关推荐