JSON 数据传递给 div 标签

Question

我有以下代码，但它不起作用。我想通过 javascript 将 JSON 数据传递给 HTML div 标签。

这是一个div标签我要导入的数据

<div class="row mt-2 mb-2 height bg-dark text-light"  id="<?php echo $row['dev_ID']; ?>">
            <div class="col-3" >
                <div class="card height bg-dark" style="width: auto">
                    <div class="card-body" >
                        <h6 id="trname">Name : </h6>
                        <p id="trtype"></p>
                    </div>
                </div>
            </div>
            <div class="col-2">
                <div class="card height bg-dark" style="width: auto">
                    <div class="card-body">
                        <h6>Status</h6>
                        <p ><p id="trstatus"></p><?php // echo $row['dev_Status']; ?></p>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card height bg-dark" style="width: auto">
                    <div class="card-body">
                        <h6>Reading 01</h6>
                        <p id="trreading01"><?php// echo $row['dev_Reading01']; ?></p>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card height bg-dark" style="width: auto">
                    <div class="card-body">
                        <h6>Reading 02</h6>
                        <p id="trreading02"><?php// echo $row['dev_Reading02']; ?></p>
                    </div>
                </div>
            </div>
            <div class="col-1">
                <div class="card height bg-dark" style="width: auto">
                    <div class="card-body">
                        <h6>Dev</h6>

                    </div>
                </div>
            </div>
        </div>

这是我的 javascript 部分。我猜我需要使用 AJAX 或 Jquery，但我缺乏有关如何使用的知识。

document.getElementById('button').addEventListener('click',loadReadings);
    //load readings
      function loadReadings(){
          setInterval(function(){
          var xhr = new XMLHttpRequest();
          xhr.open('POST','xhr.php',true);

          xhr.onload = function(){
              if(this.status == 200){
                  var obj =this.responseText;
                  console.log(this.responseText);
                  for (var key in obj){
                      if(obj.hasOwnProperty(key)){

              var row = document.getElementById(obj[key].id);
            // innerHTML = property is useful for getting or replacing the content of HTML elements.
            row.div[1].innerHTML = obj[key].dev_type;
            row.trstatus[2].innerHTML = obj[key].status;
            row.trreading01[3].innerHTML = obj[key].reading01;
            row.trreading02[4].innerHTML = obj[key].reading02;




                      }
                  }

              }
          }
          xhr.send( )
          },1000);
      }

这也是 php 部分。

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb1";


$array = array();

$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM dmaster";


$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        $arraynew = array(
            'id'        =>$row["dID"],
            'dev_name'  =>$row["dName"],
            'dev_type'  =>$row["dType"],
            'access_code'  =>$row["access_Code"],
            'time_stamp'=>$row["time_Stamp"],
            'status'    =>$row["dStatus"],
            'reading01' =>$row["dReading01"],
            'reading02' =>$row["dReading02"]
        );
        $arraynew = array_map('htmlentities',$arraynew);
        array_push($array,$arraynew);
    }
} else {
    //echo "0 results";
}

mysqli_close($conn);

$json = html_entity_decode(json_encode($array));
echo "data: ".$json."\n\n";

ob_end_flush();
flush();
?>

Answer 1

我检查了您的代码并发现了一些问题，请更新

更新php文件：

 echo "data: ".$json."\n\n";
 replace with only echo $json;

在 javascript 脚本中更新：

   <script type="text/javascript">
            function loadReadings(){
              var xhr = null;
              if(window.ActiveXObject) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
              else if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
              if(xhr)
              {
                  xhr.open('POST','xhr.php',true);
                  xhr.onreadystatechange = function(){
                      if(xhr.readyState == 4 && xhr.status == 200){
                         var obj = JSON.parse(xhr.responseText);

                         for (var key in obj){
                             if(obj.hasOwnProperty(key)){

                                var row = document.getElementById(obj[key].id);
                                console.log(row);
                                // innerHTML = property is useful for getting or replacing the content of HTML elements.
                                row.getElementsByTagName('div')[1].innerHTML = obj[key].dev_type;
                                document.getElementById('trstatus').innerHTML = obj[key].status;
                                document.getElementById('trreading01').innerHTML = obj[key].reading01;

                                document.getElementById('trreading02').innerHTML = obj[key].reading02;

                              }
                          }


                      }
                  }
                  xhr.send();
              }

          }
    </script>

因为在您的脚本中仅通过 xhr 状态而不是 readystate 检查，因此它会在 ajax 请求触发时产生问题，并且您通过获取行 var 的引用来设置值的另一件事对于 div 没问题，但保持所有已经 id因此无需参考，但如果您正在考虑，您可以列出多个动态信息，然后将所有信息定义为一个类，因为根据您当前的代码，您的页面将包含多个相同的 id，这是不正确的

在 html 中更新：

当您将事件与按钮 id 绑定时，您不会将任何按钮 id 绑定到任何标签 所以在你的 html 代码中添加这一行

 <button type="button" onclick="loadReadings()">Click here </button>