数据库中的数据 --> 到 .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 data

while($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 datawhile($res = mysqli_fetch_array($result_set)) {&nbsp; $results[] = array(&nbsp; &nbsp; "date" => $res["date"],&nbsp; &nbsp; "temperature" => (int) $res["temperature"],&nbsp; &nbsp; "pressure" => (int) $res["pressure"],&nbsp; &nbsp; "rpm" => (int) $res["rpm"],&nbsp; ); //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() {&nbsp; &nbsp; let response = await fetch("http://localhost:8000/read.php");&nbsp; &nbsp; let json = await response.json();&nbsp; &nbsp; var data = new google.visualization.DataTable();&nbsp; &nbsp; data.addColumn('string', 'date');&nbsp; &nbsp; data.addColumn('number', 'temperature');&nbsp; &nbsp; data.addColumn('number', 'pressure');&nbsp; &nbsp; data.addColumn('number', 'rpm');&nbsp; &nbsp; //loop through the data and add a table row and a chart row for each row received from the server&nbsp; &nbsp; for (var i = 0; i < json.length; i++) {&nbsp; &nbsp; &nbsp; addRow(json[i]);&nbsp; &nbsp; &nbsp; data.addRow(Object.values(json[i]));&nbsp; &nbsp; }&nbsp; &nbsp; var options = {&nbsp; &nbsp; &nbsp; &nbsp; chart: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'Sensor Data',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; subtitle: ''&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; width: 1045,&nbsp; &nbsp; &nbsp; &nbsp; height: 500&nbsp; &nbsp; };&nbsp; &nbsp; var chart = new google.charts.Line(document.getElementById('linechart_material'));&nbsp; &nbsp; chart.draw(data, google.charts.Line.convertOptions(options));}然后用这个版本替换 addRow 函数：function addRow(data) {&nbsp; &nbsp; let tBody=document.getElementById("sensorData");&nbsp; &nbsp; let row=tBody.insertRow(-1);&nbsp; &nbsp; let cell=row.insertCell(-1);&nbsp; &nbsp; let dateTextNode=document.createTextNode(data.date);&nbsp; &nbsp; cell.appendChild(dateTextNode);&nbsp; &nbsp; cell=row.insertCell(-1);&nbsp; &nbsp; let temperatureTextNode=document.createTextNode(data.temperature);&nbsp; &nbsp; cell.appendChild(temperatureTextNode);&nbsp; &nbsp; cell=row.insertCell(-1);&nbsp; &nbsp; let pressureTextNode=document.createTextNode(data.pressure);&nbsp; &nbsp; cell.appendChild(pressureTextNode);&nbsp; &nbsp; cell=row.insertCell(-1);&nbsp; &nbsp; let rpmTextNode=document.createTextNode(data.rpm);&nbsp; &nbsp; cell.appendChild(rpmTextNode);}