Javascript 自动刷新Java脚本中的某些PHP代码

我正在我的Pi上建立一个小的监控网页，以跟踪功率计的一些功率读数

目前，我正在向设置中添加一些仪表，使其看起来非常漂亮，我正在使用canvas gauges（）来实现这一点

我在后台有一个python脚本，从仪表中提取数据，然后每分钟将其保存到一个文件中，然后通过PHP访问该文件，以便在网页侧显示数据。我将数据显示为文本，自动更新很好，但是仪表在启动时收集变量，然后从不更改，请参见下面的代码：

...Some code...

<?php
            $dataFile = "data/Data.txt";
            if (file_exists($dataFile)) {
                chmod($dataFile, 0777);
            } else {
                echo "The file $dataFile does not exist";
            }
            $dataLines = file($dataFile);
            $volts = $dataLines[3];
            ?>

...Some code...

<div id="voltsR" class="voltsR">
                    <?php echo "The Voltage is $volts V";
                    ?>
</div>
<canvas id="voltG">
</canvas>


...Some Code...

        <script type="text/javascript">
            setInterval("reload();",10000); <!-- time in milliseconds -->
            function reload() {
                $("#voltsR").load(location.href+" #voltsR");
                voltGr.update({value: <?php echo $volts ?>});
            }
        </script>
        <script>
        var voltGr = new RadialGauge ({
        renderTo:"voltG",
        width:"150",
        height:"150",
        units:"V",
        title:"Volts",
        minValue:"0",
        maxValue:"300",
        majorTicks:"0,20,40,60,80,100,120,140,160,180,200,220,240,260,280,300",
        minorTicks:"2",
        strokeTicks:"false",
        highlights:[
                { "from": 0, "to": 210, "color": "rgba(166, 28, 28, .25)" },
                { "from": 210, "to": 245, "color": "rgba(28, 166, 28, .25)" },
                { "from": 245, "to": 300, "color": "rgba(166, 28, 28, .25)" }
        ],
        colorPlate:"#222",
        colorMajorTicks:"#f5f5f5",
        colorMinorTicks:"#ddd",
        colorTitle:"#fff",
        colorUnits:"#ccc",
        colorNumbers:"#eee",
        colorNeedleStart:"rgba(240, 128, 128, 1)",
        colorNeedleEnd:"rgba(255, 160, 122, .9)",
        valueBox:"true",
        animationRule:"bounce",
        animationDuration:"500",
        fontValue:"Led",
        animatedValue:"true"});
        voltGr.draw();
        voltGr.value = <?php echo $volts ?>;
        </script>

…一些代码。。。
…一些代码。。。
…一些代码。。。
setInterval（“reload（）；”，10000）；
函数重载（）{
$（“#voltsR”）.load（location.href+“#voltsR”）；
voltGr.update（{value:}）；
}
var-voltGr=新半径({
伦德托：“沃尔特”，
宽度：“150”，
高度：“150”，
单位：“V”，
标题：“伏特”，
最小值：“0”，
最大值：“300”，
少校：“0,20,40,60,801001020140160180200220240260280300”，
米诺蒂克：“2”，
strokeTicks：“假”，
亮点：[
{“from”：0，“to”：210，“color”：“rgba（166,28,28,25）”，
{“from”：210，“to”：245，“color”：“rgba（28166,28,25）”，
{“from”：245，“to”：300，“color”：“rgba（166,28,28,25）”}
],
色板：“222”，
彩色马赛克：“F5”，
colorMinorTicks:“ddd”，
颜色标题：“fff”，
颜色单位：“#ccc”，
颜色编号：“eee”，
colorNeedleStart:“rgba（240、128、128、1）”，
ColorNeedEnd:“rgba（255、160、122、9）”，
valueBox：“正确”，
动画规则：“反弹”，
动画持续时间：“500”，
fontValue:“Led”，
animatedValue:“true”}）；
voltGr.draw（）；
伏特加值=；

发生了什么： 当前发生的情况是，代码的文本部分将每10秒更新一次，一分钟后，它将显示从文本文件中新提取的$volts数据，即，第一次读数将显示为“电压为241.567 V”，一分钟后将显示为：“电压为240.345 V”

仪表将读取第一个读数241.567并正确显示，但一分钟后该值不会变为新值

如果我右键单击->检查网页，我可以看到$volts变量在底部的Java脚本部分中没有更新，但在div VoltsR中已经更新

如何使这两个值相应地更新

---

谢谢，

克里斯·G帮助我到达了我想去的地方：

我创建了一个单独的php文件，从文件中提取数据（

/data/getData.php

），然后使用

$.get（）

命令每隔一段时间提取一次数据并更新图形：

setInterval(reload, 10000); // time in milliseconds
function reload() {
  $("#voltsR").load(location.href + " #voltsR");
  $.get("/data/getData.php", function (valString) {
    voltGr.update({ value: parseFloat(valString, 10) });
  });
}

---

PHP代码在服务器上运行一次。页面加载到浏览器后，PHP在HTML文档中回显的值永远不会改变。直到重新加载页面。所以

$（“#voltsR”）.load（location.href+“#voltsR”）

将起作用（因为该值是使用新的HTTP请求从服务器加载的），但是

voltGr.update（{value:}）

不会，因为

值仍然是第一次加载页面时的值。您需要创建一个只返回值的PHP端点，然后使用.Hey@ChrisG请求该值，因此我使用
$dataFile=“modPwrData.txt”创建了一个PHP文件；如果（file_exists（$dataFile））{chmod（$dataFile，0777）；}else{echo“file$dataFile不存在”}$dataLines=file（$dataFile）$伏特=$数据线[3]；函数getVolts（）{echo$volts；}
然后添加
voltGr.update（{value:$.get（“/data/getData.php”），函数（getVolts）{alert（getVolts）；}
转到量表的更新行。我在这里肯定做错了什么。不过，当我收到一个空白警报，然后量表返回一个NaN结果时，这是一个get请求，您可以仅从PHP端的故障排除开始；只需转到，您应该会看到数字。但是查看您的PHP代码，问题似乎很清楚：您不是calli正在调用函数。只需将函数替换为echo$volts；

，它就应该可以工作了。嗨，克里斯，为这里的安静表示歉意，事情有点忙。所以我从getData.php中删除了所有行，并将其替换为“``$dataFile=“modPwrData.txt”；$dataLines=file（$dataFile）；$volts=$dataLines[3]；echo$volts；``浏览页面（localhost/data/getData.php）会按预期返回值，但图形会返回未定义的值？用于更新图形的间隔脚本中的代码是

voltGr.update（{value:$.get（“/data/getData.php”））；