将数组从 php 传递给 javascript [英] Pass an array from php to javascript
本文介绍了将数组从 php 传递给 javascript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将一个数组从 php(在单独的文件中)传递到 JavaScript 并更新 HTML 表.php端的数组是MySQL查询的结果.这是我到目前为止所做的:
function updateSensorsTable() {$.getJSON("/getTableFromDB.php", function (json) {对于 (i = 0; i <8; i++ )document.getElementById(i).innerHTML = json[i];});}
<?php包括(connect_to_mysql.php");$result = mysql_query("SELECT value FROM sens");while ($row = mysql_fetch_row($result)) {$php_array[]=$row[0];}回声 json_encode($php_array);?>
解决方案
这里是完整的页面
<script type="text/javascript" >setInterval(updateSensorsTable, 2000);设置间隔(更新功率,1000);函数显示值(值){//在html中显示值document.getElementById("brightnesValue").innerHTML = value;//设置亮度值为DB id=10callPage('/setValueToDB.php?value=' + value + '& id=10' + '', document.getElementById(''));}功能 TurnLedOn() {//TODO: 需要设置led状态并更新sql serverdocument.getElementById("ledStatus").src = "/LedOn.png";callPage('/setValueToDB.php?value=1&id=9' + '', document.getElementById(''));}功能 TurnLedOff() {//TODO: 需要设置led状态并更新sql serverdocument.getElementById("ledStatus").src = "/LedOff.png";callPage('/setValueToDB.php?value=0&id=9' + '', document.getElementById(''));}函数 AjaxCaller() {var xmlhttp = false;尝试 {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}赶上(e){尝试 {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}抓住(E){xmlhttp = 假;}}if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {xmlhttp = 新的 XMLHttpRequest();}返回xmlhttp;}函数调用页(网址,div){var ajax = AjaxCaller();ajax.open("GET", url, true);ajax.onreadystatechange = 函数 () {如果(ajax.readyState == 4){如果(ajax.status == 200){div.innerHTML = ajax.responseText;}}}ajax.send(null);}函数更新传感器表(){for (i = 0; i <8; i++) {callPage('/getVarFromDB.php?offset=' + i , document.getElementById(i));}/*$.getJSON("/getTableFromDB.php", function (json) {对于 (i = 0; i <8; i++ )document.getElementById(i).innerHTML = json[i];});*/}函数 updatePower() {callPage('/getVarFromDB.php?offset=' + 10, document.getElementById('powerValue'));}</script>
<html lang="zh-cn"><头><meta charset="utf-8"/><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/><title>SmartLight</title>头部><body bgcolor="#E6E6FA"><br></br><table class="sensorsTable" align="center"><头><tr ><th>传感器</th><th>值</th></tr></thead><tr><td align="left">GPS</td><td align="center" id="0">0</td></tr><tr><td align="left">温度</td><td align="center" id="1">0</td></tr><tr><td align="left">压力</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">海拔</td><td align="center" id="4">0</td></tr><tr><td align="left">加速度计</td><td align="center" id="5">0</td></tr><tr><td align="left">湿度</td><td align="center" id="6">0</td></tr><tr><td align="left">相机</td><td align="center" id="7">0</td></tr></tbody><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 亮起</td><td align="center" id="ledOffButton">LED 关闭</td><td align="center">LED 状态</td></tr><div align="center">亮度:<input type="range" id="brightnesBar" min="0" max="100" value="0" step="1" onchange="showValue(this.value)"/><span id="brightnesValue">0</span><table align="center" class="power"><tr><td align="center" id="powerValue">0</td><td align="left">mW</td></tr><div align="center" >LED 功率计</div>I'm trying to pass an array from php (on a separate file) side to JavaScript and update HTML table. The array on the php side is a result of MySQL query.
Here is what I've done so far:
function updateSensorsTable() {
$.getJSON("/getTableFromDB.php", function (json) {
for (i = 0; i < 8;i++ )
document.getElementById(i).innerHTML = json[i];
});
}
<?php
include("connect_to_mysql.php");
$result = mysql_query("SELECT value FROM sens" );
while ($row = mysql_fetch_row($result)) {
$php_array[]=$row[0];
}
echo json_encode($php_array);
?>
解决方案 Here is the complete page
<script type="text/javascript" >
setInterval(updateSensorsTable, 2000);
setInterval(updatePower, 1000);
function showValue(value) {
//show value in html
document.getElementById("brightnesValue").innerHTML = value;
//Set brightness value to DB id=10
callPage('/setValueToDB.php?value=' + value + '& id=10' + '', document.getElementById(''));
}
function TurnLedOn() {
//TODO: need to set the led state and update the sql server
document.getElementById("ledStatus").src = "/LedOn.png";
callPage('/setValueToDB.php?value=1&id=9' + '', document.getElementById(''));
}
function TurnLedOff() {
//TODO: need to set the led state and update the sql server
document.getElementById("ledStatus").src = "/LedOff.png";
callPage('/setValueToDB.php?value=0&id=9' + '', document.getElementById(''));
}
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) {
var 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 < 8; i++) {
callPage('/getVarFromDB.php?offset=' + i , document.getElementById(i));
}
/*
$.getJSON("/getTableFromDB.php", function (json) {
for (i = 0; i < 8;i++ )
document.getElementById(i).innerHTML = json[i];
});
*/
}
function updatePower() {
callPage('/getVarFromDB.php?offset=' + 10, document.getElementById('powerValue'));
}
</script>
<!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">
<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" id="brightnesBar" min="0" max="100" value="0" step="1" onchange="showValue(this.value)" />
<span id="brightnesValue">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>
这篇关于将数组从 php 传递给 javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆