1
我有一個HTML頁面，裏面有一個表格，我想每隔2秒更新一次數據值，並將值存儲在MySQL數據庫中。重複從SQL服務器更新HTML表格
setInterval(updateSensorsTable, 2000);
setInterval(updatePower, 2000);
function showValue(value) {
document.getElementById("range").innerHTML = value;
}
function TurnLedOn() {
//TODO: need to set the led state and update the sql server
document.getElementById("ledStatus").src = "/LedOn.png";
}
function TurnLedOff() {
//TODO: need to set the led state and update the sql server
document.getElementById("ledStatus").src = "/LedOff.png";
}
function AjaxCaller() {
var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function callPage(url, div) {
ajax = AjaxCaller();
ajax.open("GET", url, true);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if (ajax.status == 200) {
div.innerHTML = ajax.responseText;
}
}
}
ajax.send(null);
}
function updateSensorsTable() {
for (i = 0; i <= 7; i++)
callPage('/getVarFromDB.php?offset=' + i, document.getElementById(i));
}
function updatePower() {
document.getElementById("powerValue").innerHTML = '200';
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
<title>SmartLight</title>
</head>
<body bgcolor="#E6E6FA" onload='updateSensorsTable()'>
<br></br>
<table class="sensorsTable" align="center">
<thead>
<tr>
<th>Sensor</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">GPS</td>
<td align="center" id="0">0</td>
</tr>
<tr>
<td align="left">Temperature</td>
<td align="center" id="1">0</td>
</tr>
<tr>
<td align="left">Pressure</td>
<td align="center" id="2">0</td>
</tr>
<tr>
<td align="left">Light</td>
<td align="center" id="3">0</td>
</tr>
<tr>
<td align="left">Altitude</td>
<td align="center" id="4">0</td>
</tr>
<tr>
<td align="left">Accelerometer</td>
<td align="center" id="5">0</td>
</tr>
<tr>
<td align="left">Humidity</td>
<td align="center" id="6">0</td>
</tr>
<tr>
<td align="left">Camera</td>
<td align="center" id="7">0</td>
</tr>
</tbody>
</table>
<br></br>
<table class="ledTable" align="center">
<tr>
<td align="center">
<input type="image" src="/TurnOn.png" id="turnOn" width="60" height="60" onclick='TurnLedOn()'>
</td>
<td align="center">
<input type="image" src="/TurnOff.png" id="turnOff" width="60" height="60" onclick='TurnLedOff()'>
</td>
<td align="center">
<img src="/LedOn.png" style="width:60px;height:60px" id="ledStatus">
</td>
</tr>
<tr>
<td align="center" id="ledOnButton">LED On</td>
<td align="center" id="ledOffButton">LED Off</td>
<td align="center">LED Status</td>
</tr>
</table>
<div align="center">
Brightness:
<input type="range" name="brightness" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
<span id="range">0</span>
<table align="center" class="power">
<tr>
<td align="center" id="powerValue">0</td>
<td align="left">mW</td>
</tr>
</table>
<div align="center">LED Power Meter</div>
</div>
</body>
</html>這裏是PHP代碼：
<?php
include("connect_to_mysql.php");
$result = mysql_query("SELECT value FROM sens");
echo mysql_result($result,$offset);
請幫我用正確的方式來做到這一點。 當我使用for循環時，此代碼不起作用。使用此代碼直接分配新建分配FY如callPage('/getVarFromDB.php?offset=' + 1, document.getElementById(1)); is working
我不想成爲那個人，但不要使用'mysql'來代替'mysqli'。沒有人可以真正回答這個問題**沒有使用mysqli的權利** – Loko 2015-02-10 10:21:31
您有效地在彼此之後激發7個xhr的請求，但將它們中的每一個存儲在名爲'ajax'的全局變量中。將全局更改爲本地：'var ajax = AjaxCaller（）'，這應該起作用。但是，爲什麼使用七個獨立的呼叫，將所有偏移量作爲JSON發送並返回一個呼叫。 – Mouser 2015-02-10 10:29:02
Mouser：你說得對。按照你的建議，它工作。調用7個請求的原因非常簡單 - 我是新手，不知道我在做什麼..我在C中爲microChips定位，所以這項任務對我來說非常困難:) – bardalas 2015-02-10 11:21:40