Question

我目前正在进行一个学校项目，我正在使用Arduino和Raspberry Pi。我设法将Raspberry Pi的温度传感器读数发送到IoT网关，并将其更新到Mysql数据库。我可以在IoT网关中使用AJAX显示传感器表。但是，问题是sensorInfo表每30秒不刷新一次。

这就是我的SensorInfo表格

sensorInfo表

序列号| SensorID |温度| SensorDate

form.html

<!DOCTYPE html>
<html>
<head>
<title>IOT Sensor gateway</title>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }


        };
        xmlhttp.open("GET","sensor.php?q="+str,true);
        xmlhttp.send();

    }

}

</script>



</head>
<body>
<h1>Welcome</h1>
<h2>IoT gateway Sensor Info</h2>

<form method="post">
Select Sensor No:
<select name="users" onchange="showUser(this.value)">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  </select>
</form>
<hr>
<br>
<div id="txtHint">Sensor readings will be displayed here...</div>

<script>
$(document).ready(function(){
    showUserinfo();
    });

    function showUserinfo(){
      $('#txtHint').load('sensor.php', function(){
        setInterval(showUserinfo, 30000);
      });
    }

</script>
</body>
</html>

sensor.php

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse:collapse;
}

table, td, th {
    border: 1px solid black;
    padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);

$conn = mysqli_connect('localhost','root','admin','tempSensorReading');
if (!$conn) {
    die('Could not connect: ' . mysqli_error($conn));
}

mysqli_select_db($conn,"ajax_demo");
$sql="SELECT * FROM SensorInfo WHERE SensorID = '".$q."' order by SerialNo desc limit 5";
$result = mysqli_query($conn,$sql);

echo "<table>
<tr>
<th>SensorNo</th>
<th>SensorDate</th>
<th>Temp</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['SensorID'] . "</td>";
    echo "<td>" . $row['SensorDate'] . "</td>";
    echo "<td>" . $row['Temp'] . "</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($conn);
?>
</body>
</html>

长期以来一直困扰着这个问题。很高兴，如果有人可以帮助我。谢谢！

Answer 1

你做错了一些事情。例如，你的jQuery.load()函数每隔30秒被调用一次，但它也会调用它的父函数，使脚本调用两次，然后调用四次，然后调用它。每次调用setInterval时，每30秒指数乘以一次。为什么不删除所有的JS并尝试这样的事情：

$(document).ready(function() {
    //Define your update function.
    var showUserInfo = function(userVal) {
        $("#txtHint").load("sensor.php?q=" + userVal, function() {
            //Anything else you want to do here.
        });
    };

    //Call your update function for the first time.
    showUserInfo();

    //Set an interval to call your update function every 30 seconds.
    setInterval(function() {
        showUserInfo($("select[name='users']").val())
    }, 30000);
});

如何每隔30秒自动刷新div传感器表？

1 个答案: