Как я могу постоянно обновлять переменную PHP без обновления страницы?

Question

Я делаю сайт, который показывает данные из базы данных 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); 

График затем показан в DIV с id "graph". Поэтому проблема заключается в том, что функция обновления не обновляет график новыми данными, так как данные не обновляются. Я слышал, что могу каким-то образом создать функцию 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 в фоновом режиме» или что-то в этом роде, ваша попытка верна. Однако вместо загрузки нового HTML вы должны загружать чистые данные (например, как документ JSON), а затем переносить эти данные в ваш существующий набор данных через JS. Использование JS для сбора обновленных данных с сервера выполняется с помощью AJAX.

Можно, например, использовать $.getJSON

Edit: Полный 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 (Use 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 для обновления значения на сервере. Также после обновления значения вам нужно будет сэкономить где-нибудь, например, в БД или кеше, потому что, когда запуск PHP закончится, процесс исчезнет, ​​и все данные, которые вы создали во время выполнения PHP, будут потеряны.