Данные JSON передаются в тег div

Question

У меня есть следующий код, и он не будет работать.Я хочу передать данные JSON в тег HTML div через JavaScript.

Это теги 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, а не состояние чтения, следовательно, это создаст проблему при срабатывании ajax-запроса, и еще одна вещь, которую вы устанавливаете значение, взяв ссылку на строку var, это нормально для div, но оставляя все как уже id, так что нет необходимостичтобы взять любую ссылку, но если вы думаете, вы можете перечислить несколько динамической информации, а затем определить все для класса, потому что по вашему текущему коду ваша страница будет содержать несколько одинаковых идентификаторов, что неправильно

обновление вhtml:

, так как вы связываете событие с идентификатором кнопки, а не с каким-либо идентификатором кнопки для какого-либо тега. Добавьте эту строку в код HTML

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