AJAX代码示例

Question

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

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

我的问题是，如何刷新mysql查询中CURTIME()的值而无需重新加载页面？这是我的剧本FYI：

<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请求调用。它的工作是从数据库中获取数据并以简单的JSON格式将其返回给JavaScript代码。

注意： 我假设每个包含的PHP文件现在都创建了PHP变量（pvvol, pvcur, batvol, batcur, chgcur, irrad）并为它们赋值。< / em>的

<?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调用服务器。

刷新JQuery脚本

2 个答案:

AJAX代码示例