如何在不刷新頁面的情況下不斷更新PHP變量？

Question

我正在建立一個網站，顯示Morris圖中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中的數據變量，而不是整個過程。 任何幫助，將不勝感激。

Answer 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"] . ' }';
    }
  ?>
]

Answer 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！

Answer 3

您將不得不使用某種ajax調用來更新服務器上的值。 此外，在更新值之后，您必須將其保存在某個位置，例如在DB或緩存中，因為當PHP運行結束時，進程將終止，並且您在PHP運行時中創建的所有數據都將丟失