来自数据库的数据 --> 到 .php 中的 json 数组 --> 这个数组到 .js 中的 table 然后通过调用 .js 文件在 .html 中可视化
Data from database --> to json array in .php --> this array into table in .js and then visualise it in .html by calling .js file
我必须从我的数据库中获取数据并将其显示在 data.html + google 图表中的 table 中。所以基本上我的 html 必须调用 script.js 文件，该文件使用 read.php 作为 API 从我的数据库中提取数据。
我认为我的 html 文件没问题。但是我非常喜欢 .js 和 .php 文件。
我需要帮助如何将数据从数据库存储到 .php 文件，然后使用 .js 文件中的数据在我的 html table.[=17 中添加行=]
请大家帮忙。
<?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');
//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));
}
<!DOCTYPE html>
<html>
<head>
<title>Sensor Data</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header id="main-header">
<div class="container">
<h1><center>Sensor data</center></h1>
</div>
</header>
<section id="mainpic6">
</section>
<h1><center>Visualisation of sensor data --> last 100 records</center></h1>
<div class="container">
<section id="main4">
<table>
<thead>
<tr>
<th>Date</th>
<th>Temperature</th>
<th>Pressure</th>
<th>RPM</th>
</tr>
</thead>
<tbody id="sensorData">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<button id="get">GET</button>
</tbody>
</table>
</section>
<div></div>
<aside id="sidebar2">
<div id="linechart_material"></div>
</aside>
</div>
<footer id="main-footer">
<p>Copyright © 2020 Arturas Website</p>
</footer>
<script src="script/script.js"></script>
</body>
</html>
亚瑟
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);
}
我必须从我的数据库中获取数据并将其显示在 data.html + google 图表中的 table 中。所以基本上我的 html 必须调用 script.js 文件，该文件使用 read.php 作为 API 从我的数据库中提取数据。
我认为我的 html 文件没问题。但是我非常喜欢 .js 和 .php 文件。
我需要帮助如何将数据从数据库存储到 .php 文件，然后使用 .js 文件中的数据在我的 html table.[=17 中添加行=]
请大家帮忙。
<?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');
//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));
}
<!DOCTYPE html>
<html>
<head>
<title>Sensor Data</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header id="main-header">
<div class="container">
<h1><center>Sensor data</center></h1>
</div>
</header>
<section id="mainpic6">
</section>
<h1><center>Visualisation of sensor data --> last 100 records</center></h1>
<div class="container">
<section id="main4">
<table>
<thead>
<tr>
<th>Date</th>
<th>Temperature</th>
<th>Pressure</th>
<th>RPM</th>
</tr>
</thead>
<tbody id="sensorData">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<button id="get">GET</button>
</tbody>
</table>
</section>
<div></div>
<aside id="sidebar2">
<div id="linechart_material"></div>
</aside>
</div>
<footer id="main-footer">
<p>Copyright © 2020 Arturas Website</p>
</footer>
<script src="script/script.js"></script>
</body>
</html>
亚瑟
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);
}