使用JavaScript从PHP页面中提取更多信息

Question

为了在不必不断重新加载页面的情况下自动更新页面的某个部分，我已经在平台上实现了这段代码。如果只是想更新一个数据片段，一切都正常工作，实际上php页面包含了多个查询，用于填充不同的部分。我如何报告所有查询的数据结果？ 这是index.php中的JS代码：

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

这是向数据库发送查询的PHP页面：

<?php

include '../config.php';

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

$query = "SELECT COUNT(id) AS totale 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!";
}

?>

目前这段代码只适用于一个数据片段，即第一个查询的结果。但我还需要导入第二个查询的结果等等...

Answer 1

要使用不同查询的数据更新页面的多个部分，您可以相应地修改JavaScript代码和PHP代码。以下是您可以执行的操作：

修改您的PHP脚本（caricaNumeri.php），以返回包含两个查询结果的JSON对象：

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

?>

修改您的JavaScript代码以处理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); // 每秒更新一次（根据需要进行调整）

更新您的HTML，包括第二个数据的占位符：

html

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

现在，当您运行caricaNumeri函数时，它将从服务器获取两个数据片段并更新页面的相应部分。请根据您希望数据更新的频率调整间隔时间（setInterval）。