2015-09-03 62 views
1

我正在學習構建光伏電站監控網站。我的硬件每10秒鐘向我的SQL服務器提供數據。現在,我必須以gauge的形式來表示那些記錄的數據,每10秒刷新它的值。但問題是,我無法讓我的價值被當前時間刷新。刷新JQuery腳本中的CURTIME()值

我正在使用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> 

回答

2

調用您的數據庫的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)併爲它們賦值。

<?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); 
+0

我認爲你的幫助很有用。在研究關於這個[link](http://openenergymonitor.org/emon/node/107)上的AJAX調用時,我發現了一些東西。 但我無法讓它與我的腳本一起工作。你能給出更多關於如何使用它的線索嗎?謝謝 –

+0

我會把東西放在一起,並會更新我的答案。 – Nerdwood

+0

非常感謝你 –

-1

如果你想從你的服務器的新數據,而不重新加載頁面,我建議你看看阿賈克斯。

ajax用於從javascript調用您的服務器。