Extraire plus d'informations des pages PHP à l'aide de JavaScript

Question

Afin de mettre à jour automatiquement une certaine partie de la page sans avoir à recharger constamment la page, j'ai implémenté ce code sur la plateforme. Si vous souhaitez simplement mettre à jour une donnée, tout fonctionne bien, en fait la page php contient plusieurs requêtes pour remplir différentes sections. Comment puis-je rapporter les résultats des données pour toutes les requêtes ? Voici le code JS dans index.php : <pre class="brush:js;toolbar:false;">fonction nLettere() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = fonction() { if (this.readyState == 4 && this.status == 200) { const monObj = JSON.parse(this.responseText); document.getElementById("nLettere").innerHTML = this.responseText; } } ; xhttp.open("GET", "script/caricaNumeri.php", true); xhttp.send(); } setInterval(fonction(){ nLettre(); }, 1); ≪/pré> Il s'agit de la page PHP qui envoie la requête à la base de données : <pre class="brush:php;toolbar:false;"><?php inclure '../config.php'; // Vérifier la connexion si ($conn->connect_error) { die("Échec de la connexion : " . $conn->connect_error); } $query = "SELECT COUNT(id) AS total FROM indirizzi"; $ résultat = $ conn->query ($query); if ($risultato->num_rows > 0) { //données de sortie de chaque ligne while($row = $risultato->fetch_assoc()) { $numero = $row["totale"]; } } autre { $numero = "Ancora nessuna per ora!"; } $query = "SELECT COUNT(stato) AS daConsegnare FROM indique WHERE statut = ''"; $ résultat = $ conn->query ($query); if ($risultato->num_rows > 0) { //données de sortie de chaque ligne while($row = $risultato->fetch_assoc()) { $daConsegnare = $row["daConsegnare"]; } } autre { $daConsegnare = "Ancora nessuna per ora!"; } ?> ≪/pré> Actuellement, ce code ne fonctionne qu'avec une seule donnée, le résultat de la première requête. Mais je dois aussi importer les résultats de la deuxième requête et ainsi de suite...

Answer 1

Pour mettre à jour plusieurs parties de la page avec les données de différentes requêtes, vous pouvez modifier le code JavaScript et le code PHP en conséquence. Voici ce que vous pouvez faire :

Modifiez votre script PHP (caricaNumeri.php) pour renvoyer un objet JSON contenant les résultats des deux requêtes :

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);

?>

Modifiez votre code JavaScript pour gérer plusieurs fragments de données renvoyés par votre script PHP :

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); // 每秒更新一次（根据需要进行调整）

Mettez à jour votre code HTML pour inclure un espace réservé pour les deuxièmes données :

html

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

Maintenant, lorsque vous exécutez la fonction caricaNumeri, elle récupère les deux fragments de données du serveur et met à jour les parties correspondantes de la page. Veuillez ajuster l'intervalle (setInterval) en fonction de la fréquence à laquelle vous souhaitez que les données soient mises à jour.