Extract more information from PHP pages using JavaScript

Question

In order to automatically update a certain part of the page without having to constantly reload the page, I have implemented this code on the platform. If you just want to update a piece of data, everything works fine, in fact the php page contains multiple queries to populate different sections. How do I report the data results for all queries? This is the JS code in index.php:

function nLettere() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      const myObj = JSON.parse(this.responseText);
      document.getElementById("nLettere").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "script/caricaNumeri.php", true);
  xhttp.send();
}

setInterval(function(){
  nLettere();
}, 1);

This is the PHP page that sends the query to the database:

<?php

include '../config.php';

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$query = "SELECT COUNT(id) AS total FROM indirizzi";
$risultato = $conn->query($query);
if ($risultato->num_rows > 0) {
  //output data of each row
 while($row = $risultato->fetch_assoc()) {
    $numero = $row["totale"];
  }
} else {
  $numero = "Ancora nessuna per ora!";
}

$query = "SELECT COUNT(stato) AS daConsegnare FROM indirizzi WHERE stato = ''";
$risultato = $conn->query($query);
if ($risultato->num_rows > 0) {
  //output data of each row
 while($row = $risultato->fetch_assoc()) {
    $daConsegnare = $row["daConsegnare"];
  }
} else {
  $daConsegnare = "Ancora nessuna per ora!";
}

?>

Currently this code only works with one piece of data, the result of the first query. But I also need to import the results of the second query and so on...

Answer 1

To update multiple parts of the page with data from different queries, you can modify the JavaScript code and PHP code accordingly. Here's what you can do:

Modify your PHP script (caricaNumeri.php) to return a JSON object containing the results of both queries:

php

<?php

include '../config.php';

// 检查连接
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$response = array();

$query = "SELECT COUNT(id) AS totale FROM indirizzi";
$risultato = $conn->query($query);
if ($risultato->num_rows > 0) {
    // 输出每一行的数据
    while($row = $risultato->fetch_assoc()) {
        $response["totale"] = $row["totale"];
    }
} else {
    $response["totale"] = "Ancora nessuna per ora!";
}

$query = "SELECT COUNT(stato) AS daConsegnare FROM indirizzi WHERE stato = ''";
$risultato = $conn->query($query);
if ($risultato->num_rows > 0) {
    // 输出每一行的数据
    while($row = $risultato->fetch_assoc()) {
        $response["daConsegnare"] = $row["daConsegnare"];
    }
} else {
    $response["daConsegnare"] = "Ancora nessuna per ora!";
}

echo json_encode($response);

?>

Modify your JavaScript code to handle multiple data fragments returned by the PHP script:

javascript

function caricaNumeri() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            const data = JSON.parse(this.responseText);
            document.getElementById("nLettere").innerHTML = data.totale;
            document.getElementById("daConsegnare").innerHTML = data.daConsegnare;
        }
    };
    xhttp.open("GET", "script/caricaNumeri.php", true);
    xhttp.send();
}

setInterval(function(){
    caricaNumeri();
}, 1000); // 每秒更新一次（根据需要进行调整）

Update your HTML to include a placeholder for the second data:

html

<div id="nLettere"></div>
<div id="daConsegnare"></div>

Now when you run the caricaNumeri function it will get the two data fragments from the server and update the corresponding parts of the page. Please adjust the interval (setInterval) according to how often you want the data to be updated.