Javascript - AJAX：如何將 JSON 數據傳遞給 Z4C4AD5FCA2E7A3F74DBB1CED00381AA 標簽？

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 所以不需要獲取任何參考，但如果您正在考慮，您可以列出多個動態信息，然后將所有信息定義為 class，因為根據您當前的代碼，您的頁面將包含多個相同的 id，這是不正確的

html 中的更新：

當您將事件與按鈕 ID 綁定時，您沒有將任何按鈕 ID 綁定到任何標簽所以在您的 html 代碼中添加此行

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