数据库中的数据 --> 到 .php 中的 json 数组 --> 这个数组到 .js 中的表中

Question

我必须从我的数据库中获取数据并将其显示在 data.html + google 图表中的表格中。所以基本上我的 html 必须调用 script.js 文件，它使用 read.php 作为 API 来从我的数据库中提取数据。我认为我的 html 文件没问题。但我非常坚持使用 .js 和 .php 文件。我需要帮助如何将数据从数据库存储到 .php 文件，然后使用 .js 文件中的数据在我的 html 表中添加行。请大家帮忙。<?php$dbhost = 'localhost';$dbuser = 'webuser';$dbpass = 'secretpassword';$dbname = 'iot_website';$connection = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);?><?php$result_set = mysqli_query($connection, "SELECT * FROM sensor_data ORDER BY id DESC LIMIT 100");?><?php    $results = []; //new blank array ready for populating with row datawhile($res = mysqli_fetch_array($result_set)) {  $results[] = $res; //add the newly fetched row data into the results array}echo json_encode($results); //encode the array, and then echo the result so that it goes into the response for the JavaScript to read.mysqli_free_result($result_set);mysqli_close($connection);?>"use strict";google.charts.load('current', { 'packages': ['line'] });document.getElementById('get').addEventListener('click', getData);function addRow(data) {    let tBody=document.getElementById("sensorData");    let row=tBody.insertRow(-1);    let cell=row.insertCell(-1);    let dateTextNode=document.createTextNode(data.date);    cell.appendChild(dateTextNode);    cell=row.insertCell(-1);    let temperatureTextNode=document.createTextNode(data.temperature);    cell.appendChild(temperatureTextNode);    cell=row.insertCell(-1);    let pressureTextNode=document.createTextNode(data.pressure);    cell.appendChild(pressureTextNode);    cell=row.insertCell(-1);    let rpmTextNode=document.createTextNode(data.rpm);    cell.appendChild(rpmTextNode);}async function getData() {    let response = await fetch("http://localhost:8000/read1.php");    let json = await response.json();    var data = new google.visualization.DataTable();    data.addColumn('string', 'date');    data.addColumn('number', 'temperature');    data.addColumn('number', 'pressure');    data.addColumn('number', 'rpm');    }

Answer 1

PHP 的其余问题是：

1）您没有使用循环来创建行数组，而是尝试对 Mysqli 结果集进行编码。它不直接包含行数据，必须获取它（这就是循环while的目的）。

2) 你还在输出 HTML，这会在 JavaScript 代码试图读取你的响应时混淆它（并假设 - 它应该 - 它可以将其全部视为 JSON）

3) 你没有回显编码的 JSON——事实上你根本没有对它做任何事情。

这应该更好用：

$results = []; //new blank array ready for populating with row data

while($res = mysqli_fetch_array($result_set)) {

  $results[] = array(

    "date" => $res["date"],

    "temperature" => (int) $res["temperature"],

    "pressure" => (int) $res["pressure"],

    "rpm" => (int) $res["rpm"],

  ); //add the necessary fields from the newly fetched row data into the results array

}

echo json_encode($results); //encode the array, and then echo the result so that it goes into the response for the JavaScript to read.

我也不知道你在哪里找到 JavaScript，但它似乎使事情过于复杂，或者期望从服务器获得更复杂的结果集，而且在某些地方它并不完全有意义 - 我不认为即使使用它预期的数据集它也能正常工作。

因此，请将 getData 函数替换为：

async function getData() {

    let response = await fetch("http://localhost:8000/read.php");

    let json = await response.json();

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'date');

    data.addColumn('number', 'temperature');

    data.addColumn('number', 'pressure');

    data.addColumn('number', 'rpm');

    //loop through the data and add a table row and a chart row for each row received from the server

    for (var i = 0; i < json.length; i++) {

      addRow(json[i]);

      data.addRow(Object.values(json[i]));

    }

    var options = {

        chart: {

            title: 'Sensor Data',

            subtitle: ''

        },

        width: 1045,

        height: 500

    };

    var chart = new google.charts.Line(document.getElementById('linechart_material'));

    chart.draw(data, google.charts.Line.convertOptions(options));

}

然后用这个版本替换 addRow 函数：

function addRow(data) {

    let tBody=document.getElementById("sensorData");

    let row=tBody.insertRow(-1);

    let cell=row.insertCell(-1);

    let dateTextNode=document.createTextNode(data.date);

    cell.appendChild(dateTextNode);

    cell=row.insertCell(-1);

    let temperatureTextNode=document.createTextNode(data.temperature);

    cell.appendChild(temperatureTextNode);

    cell=row.insertCell(-1);

    let pressureTextNode=document.createTextNode(data.pressure);

    cell.appendChild(pressureTextNode);

    cell=row.insertCell(-1);

    let rpmTextNode=document.createTextNode(data.rpm);

    cell.appendChild(rpmTextNode);

}