我已经使用这种 xmlhttprequest 方法来制作显示水质但无法正常工作的实时仪表图表？
Posted
技术标签:
【中文标题】我已经使用这种 xmlhttprequest 方法来制作显示水质但无法正常工作的实时仪表图表？【英文标题】：I've used this xmlhttprequest approach to be able to make a real-time gauge chart that shows water quality but not working? 【发布时间】：2021-12-19 07:14:01 【问题描述】：没有这个 xmlhttprequest，仪表图可以正常工作并显示如下
但是在我在 index.php 中添加此代码后，图表突然停止显示，当出现问题时会发生这种情况（即使没有检测到错误），但我无法找出在哪里......
Index.php 自动更新/刷新仪表图表数据的代码，无需重新加载页面。
<?php
include("connection.php");
?>
<html>
<head>
<title>
</title>
</head>
<body>
<div class="container">
<div id="link_wrapper">
</div>
</div>
</body>
</html>
<script>
function loadXMLDoc()
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
if (this.readyState == 4 && this.status == 200)
document.getElementById("link_wrapper").innerHTML =
this.responseText;
;
xhttp.open("GET", "server.php", true);
xhttp.send();
setInterval(function()
loadXMLDoc();
// 1sec
,1000);
window.onload = loadXMLDoc;
</script>
动态仪表图的Server.php代码
<?php
$connection = mysqli_connect('localhost', 'root', '', 'adminpanel');
$query = 'SELECT * FROM tbl_waterquality ORDER BY id DESC';
$query_run = mysqli_query($connection, $query);
while ($row = mysqli_fetch_array($query_run))
?>
<html>
<head>
<div class="justify-content-between">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current',
'packages': ['gauge']
);
google.charts.setOnLoadCallback(drawChart);
function drawChart()
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Temperature', <?php echo $row['temperature'] ?>],
['pH', <?php echo $row['pH'] ?>],
['DO', <?php echo $row['DO'] ?>],
['Turbidity ', <?php echo $row['Turbidity'] ?>]
]);
<?php
?>
var options =
width: 500,
height: 200,
minorTicks: 5,
;
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px,; margin-top:30px"></div>
</body>
</html>
【问题讨论】：
什么确切不起作用？ AJAX 请求是否正确发送？服务器是否返回预期的数据（我不会假设，因为您为数据库中的每一行开始一个新的<html> 块）？
【参考方案1】：
正确执行此操作的方法是仅使用 PHP 获取 DATA，然后在页面中运行它。
从您的数据库中返回 JSON 并将其传递给执行可视化的函数。
这是您的新 server.php - 已完成
<?php
header("content-type: application/json");
$connection = mysqli_connect('localhost', 'root', '', 'adminpanel');
$query = 'SELECT * FROM tbl_waterquality ORDER BY id DESC';
$query_run = mysqli_query($connection, $query);
$row = mysqli_fetch_array($query_run); // assuming ONE result
echo <<<EOT
[
["Label", "Value"],
["Temperature", $row["temperature"]],
["pH", $row["pH"] ],
["DO", $row["DO"] ],
["Turbidity", $row["Turbidity"]]
]
EOT
?>
并使用此页面调用它
在测试后取消注释 fetch 的注释
<!doctype html>
<html>
<head>
<meta charset="utf8" />
<title>Gauge</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
/* ------------- Remove when you uncomment the fetch -----------*/
let temp = 25; // testdata
const arr = [
['Label', 'Value'],
['Temperature', temp],
['pH', 7.2],
['DO', 60],
['Turbidity ', 10]
]; // testdata
/* ------------- END Remove -----------*/
let chart;
const options =
width: 500,
height: 200,
minorTicks: 5,
;
const drawChart = arr =>
if (!chart) chart = new google.visualization.Gauge(document.getElementById('chart_div')); // only do this once
var data = google.visualization.arrayToDataTable(arr);
chart.draw(data, options);
const getData = () =>
/* UNCOMMENT after test
fetch('server.php')
.then(response => response.json())
.then(arr =>
drawChart(arr);
setTimeout(getData, 2000); // run again
);
*/
/* REMOVE AFTER TEST */
drawChart(arr); // remove after test
arr[1][1] = ++temp
setTimeout(getData, 5000); // run again - remove after test
/* END REMOVE */
;
window.addEventListener("load", () => // when page loads
google.charts.load('current',
'packages': ['gauge']
);
google.charts.setOnLoadCallback(getData); // start
)
</script>
</head>
<body>
<div class="justify-content-between">
<div id="chart_div" style="width: 400px; height: 120px,; margin-top:30px"></div>
</div>
</body>
</html>如果你需要创建一个包含所有行的数组，这里是如何循环的
http://sandbox.onlinephpfunctions.com/code/8c371c0da3a5e7a91bcf8cf1e961f822c0755e57
$arr = array(array( "Label", "Value"));
while ($row = mysqli_fetch_array($query_run))
array_push($arr,
array("Temperature", $row["temperature"]),
array("pH", $row["pH"] ),
array("DO", $row["DO"] ),
array("Turbidity", $row["Turbidity"])
);
echo json_encode($arr)
【讨论】：
您好，我会尝试一下，如果它可以工作并首先了解 json_encode 方法。另外，我目前只是在测试它，但我会将间隔设置得更长一些。谢谢。 关于您发布的第一个代码，所以一切都将保持不变，除了我将删除while？ 我写的php是完整的php，我写的html和js是调用它的页面 是的，但它们仍然是动态的吗？同样在 php 中，我对 echo [ 让我们continue this discussion in chat.以上是关于我已经使用这种 xmlhttprequest 方法来制作显示水质但无法正常工作的实时仪表图表？的主要内容，如果未能解决你的问题，请参考以下文章
如何在反应本机中使用 XMLHttpRequest 在 GET 方法的标头中传递授权令牌
如何将基本身份验证标头分配给 XMLHTTPREQUEST？