传递数组从php到javascript

我想从PHP（在一个单独的文件）一侧传递数组到JavaScript和更新HTML表。 PHP端的数组是MySQL查询的结果。以下是我迄今所做的：传递数组从php到javascript

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); 

?>

来源

2015-02-10 bardalas

for循环从0到7看起来有点可疑（使用'json.length'呢？）。但从它看起来你的PHP数据被发送到JS就好了。你的问题是关于如何在JavaScript中建立表格？ – Halcyon 2015-02-10 15:26:51

*“我几乎不知道PHP或** Java **”* - [JavaScript和Java不同]（https://www.java.com/en/download/faq/java_javascript.xml）。我知道你可能将JavaScript缩短为Java，而我可能正在迂腐。（你有javascript标记，并在你的问题中引用Java） – 2015-02-10 15:26:59

'console.log（JSON.stringify（json））;'之前显示什么？ – kero 2015-02-10 15:27:04

不要忘记设置标题：

header('Content-Type: application/json');

当你做 “的document.getElementById（我）” 你试试到在具有不良ID（整数）的元素女巫访问...这里是规则：

ID和名称标记必须以字母开头（[A-ZA-Z]），并且可以是f由任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）组成。

来源

2015-02-10 16:42:16 Bang

中的值更新'document.getElementById（i）.innerHTML'。添加'header（'Content-Type ：application/json'）;'在'echo'命令上面的php文件中，也改变了'id' - 仍然没有去 – bardalas 2015-02-10 16:52:09

让我看看你的表的HTML – Bang 2015-02-10 17:00:54

下面是完整的页面

<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>

来源

2015-02-11 07:26:13 bardalas

传递数组从php到javascript

回答

相关问题