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 status而不是readystate进行检查，因此当ajax请求将被触发时，它将产生问题，还有另一件事，您可以通过获取行var的引用来设置该值，对于div来说还可以，但是保留所有的id因此无需参考，但如果您正在考虑，可以列出多个动态信息，然后将所有信息定义到一个类，因为根据您当前的代码，您的页面将包含多个相同的ID，这是不正确的

以html更新：

当您通过按钮ID绑定事件时，您不会将任何按钮ID绑定到任何标签因此，将这一行添加到您的html代码中

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

JSON数据传递给div标签

1 个答案: