如何每隔30秒自動刷新div傳感器表格？

我目前正在一個學校項目中使用Arduino和Raspberry Pi。我設法將Raspberry Pi的溫度傳感器讀數發送到IoT網關，並將其更新到Mysql數據庫。我可以在物聯網網關中使用AJAX顯示傳感器表。但是，問題是sensorInfo表不會每30秒刷新一次。如何每隔30秒自動刷新div傳感器表格？

這是我SensorInfo表是什麼樣子

sensorInfo表

序列號| SensorID | Temp | 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>

一直停留在這個問題上很長時間。很高興，如果有人可以幫助我。謝謝！

來源

2017-02-08 Jtang11

你爲什麼不只是改變你的'showUserInfo'功能'的setInterval（showUserinfo，30000）;'？第一次調用時不需要加載'sensor.php'兩次。我認爲這也可以解決你的問題。 – forrestmid

– Jtang11

你的意思是像這樣如上所示？ – Jtang11

你正在做一些不正確的事情。例如，你的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); 
});

來源

2017-02-08 17:23:45 forrestmid

哦，那麼對於

如何每隔30秒自動刷新div傳感器表格？

回答