我必須從我的數(shù)據(jù)庫中獲取數(shù)據(jù)并將其顯示在 data.html + google 圖表中的表格中。所以基本上我的 html 必須調(diào)用 script.js 文件，它使用 read.php 作為 API 來從我的數(shù)據(jù)庫中提取數(shù)據(jù)。我認(rèn)為我的 html 文件沒問題。但我非常堅持使用 .js 和 .php 文件。我需要幫助如何將數(shù)據(jù)從數(shù)據(jù)庫存儲到 .php 文件，然后使用 .js 文件中的數(shù)據(jù)在我的 html 表中添加行。請大家?guī)兔Α?lt;?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'); }
1 回答
BIG陽
TA貢獻(xiàn)1859條經(jīng)驗 獲得超6個贊
PHP 的其余問題是：
1）您沒有使用循環(huán)來創(chuàng)建行數(shù)組，而是嘗試對 Mysqli 結(jié)果集進(jìn)行編碼。它不直接包含行數(shù)據(jù)，必須獲取它（這就是循環(huán)while的目的）。
2) 你還在輸出 HTML，這會在 JavaScript 代碼試圖讀取你的響應(yīng)時混淆它（并假設(shè) - 它應(yīng)該 - 它可以將其全部視為 JSON）
3) 你沒有回顯編碼的 JSON——事實上你根本沒有對它做任何事情。
這應(yīng)該更好用：
$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，但它似乎使事情過于復(fù)雜，或者期望從服務(wù)器獲得更復(fù)雜的結(jié)果集，而且在某些地方它并不完全有意義 - 我不認(rèn)為即使使用它預(yù)期的數(shù)據(jù)集它也能正常工作。
因此，請將 getData 函數(shù)替換為：
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 函數(shù)：
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);
}
- 1 回答
- 0 關(guān)注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消