在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调用来从数据库中获取最新信息。 您的JavaScript / jQuery代码对PHP文件进行AJAX调用，该PHP文件返回数据库中的最新信息。 然后由您的JS / jQuery处理此信息，并且可以使用新数据刷新g1至g6。

AJAX代码示例

PHP代码：getGaugeData.php

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

注意： 我假设每个包含的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);

Answer 2

如果您想从服务器获取新鲜数据而无需重新加载页面，建议您使用ajax。

ajax用于从javascript调用服务器。