javascript - 在 JQuery 脚本中刷新 CURTIME() 值

Question

我正在学习构建一个光伏电站监控网站。我的硬件每 10 秒向我的 SQL 服务器提供一次数据。现在，我必须以每 10 秒刷新一次其值的仪表形式表示这些记录的数据。但问题是，我无法在当前时间刷新我的值。

我正在使用 mysql 查询 CURTIME() 来匹配计算机时间。但是当我重新应用查询时，CURTIME() 不会刷新到实际的当前时间。当我加载页面时，它坚持到 CURTIME() 的最后一次阅读。因此，CURTIME() 仅在我重新加载页面后才刷新。

我的问题是，如何在不需要重新加载页面的情况下刷新 mysql 查询中的 CURTIME() 值？这是我的脚本仅供引用:

<script>
  var g1, g2, g3, g4, g5, g6;
  var pvvol  = <?php include 'pvvol.php';?>;
  var pvcur  = <?php include 'pvcur.php';?>;
  var batvol = <?php include 'batvol.php';?>;
  var batcur = <?php include 'batcur.php';?>;
  var chgcur = <?php include 'chgcur.php';?>;
  var irrad  = <?php include 'irrad.php';?>;

  window.onload = function(){
    var g1 = new JustGage({
      id: "g1", 
      value: pvvol, 
      min: 0,
      max: 80,
      title: "PV Voltage",
      label: "Volt"
    });

    var g2 = new JustGage({
      id: "g2", 
      value: pvcur, 
      min: 0,
      max: 30,
      title: "PV Current",
      label: "Ampere"
    });

    var g3 = new JustGage({
      id: "g3", 
      value: chgcur, 
      min: 0,
      max: 80,
      title: "Charge Current",
      label: "Ampere"
    });

    var g4 = new JustGage({
      id: "g4", 
      value: batvol, 
      min: 0,
      max: 30,
      title: "Battery Voltage",
      label: "Volt"
    });

    var g5 = new JustGage({
      id: "g5", 
      value: batcur, 
      min: -50,
      max: 50,
      title: "Battery Current",
      label: "Ampere"
    });

    var g6 = new JustGage({
      id: "g6", 
      value: irrad, 
      min: 0,
      max: 1200,
      title: "Irradiance",
      label: "Watt / Sqm"
    });

    setInterval(function() {
      g1.refresh(pvvol);
      g2.refresh(pvcur);          
      g3.refresh(chgcur);
      g4.refresh(batvol);
      g5.refresh(batcur);
      g6.refresh(irrad);
    }, 2500);
  };
</script>

Answer 1

调用数据库的 PHP 代码只会运行一次(每次请求/刷新页面时)。这意味着数据库中的数据永远不会更新，即使 JavaScript 更新代码每 2.5 秒运行一次。

您将需要使用 AJAX call从数据库中获取最新信息。您的 JavaScript/jQuery 代码对从数据库返回最新信息的 PHP 文件进行 AJAX 调用。这些信息然后由您的 JS/jQuery 处理，g1 到 g6 可以用新数据刷新。

AJAX 代码示例

PHP代码:getGaugeData.php

此文件由 AJAX 请求调用。它的工作是从数据库中获取数据并以简单的形式将其返回给 JavaScript 代码 JSON格式。

注意:我假设每个包含的 PHP 文件现在都会创建 PHP 变量(pvvol、pvcur、batvol、batcur、chgcur , irrad) 并为它们赋值。

<?php
    /*
     * This PHP resource is only called via AJAX - it returns data in JSON format!
     */

    //Include PHP files that get the data
    //Each include file should define a PHP variable with the same name as the file: pvvol, pvcur, batvol, batcur, chgcur, irrad
    include 'pvvol.php';
    include 'pvcur.php';
    include 'batvol.php';
    include 'batcur.php';
    include 'chgcur.php';
    include 'irrad.php';

    //Create associative array of the data
    $data = array(
        'pvvol' => $pvvol,
        'pvcur' => $pvcur,
        'batvol' => $batvol,
        'batcur' => $batcur,
        'chgcur' => $chgcur,
        'irrad' => $irrad
    );

    //Convert the data into a JSON format string
    $output = json_encode($data);

    //Return the JSON data to the JS code
    echo $output;
    exit;
?>

JavaScript 代码

setInterval(function() {

    //Set up AJAX call to getGaugeData.php
    $.getJSON('getGaugeData.php').done(function(data) {

        //Use the AJAX data to refresh the gauges
        g1.refresh(data.pvvol);
        g2.refresh(data.pvcur);
        g3.refresh(data.chgcur);
        g4.refresh(data.batvol);
        g5.refresh(data.batcur);
        g6.refresh(data.irrad);

    });

}, 2500);