晚安朋友，请我帮忙，我正在做一个项目，其中有要使用justGage js显示的仪表，要显示的数据来自mysql中的数据库，它显示的最新值很好。 ，但是我遇到的问题是，当我在最后的录音上进行修改或插入新行时，尽管使用了以下功能，仪表仍不会更新：refresh（）;
我想自动刷新数据表而不按刷新按钮
谢谢
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Gauge</title>
</head>
<body>
<div id="g1" class="gauge"></div>
<div id="g2" class="gauge"></div>
<div id="g3" class="gauge"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.9/justgage.min.js"></script>
<script>
window.onload = function() {
var g1 = new JustGage({
id: "g1",
value: [],
min: 0,
max: 1000,
donut: true,
gaugeWidthScale: 0.6,
counter: true,
hideInnerShadow: true
});
var g2 = new JustGage({
id: "g2",
value: [],
min: 0,
max: 4000,
donut: true,
gaugeWidthScale: 0.6,
counter: true,
hideInnerShadow: true
});
var g3 = new JustGage({
id: "g3",
value: [],
min: 0,
max: 1000,
donut: true,
gaugeWidthScale: 0.6,
counter: true,
hideInnerShadow: true
});
// Do an AJAX request en refresh the JustGate instances.
function loadData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
g1.refresh([this.response[8]]);
g2.refresh([this.response[1]]);
g3.refresh([this.response[2]]);
//////////////////////////////////////////
console.log (this.response);
console.log (this.response[8]);
console.log (this.response[1]);
console.log (this.response[2]);
/////////////////////////////////////
}
};
xhttp.open("GET", "api.php", true);
xhttp.send();
}
// Initial load of the data
loadData();
// After every 2 seconds call loadData
setInterval(loadData, 2000);
};
</script>
</body>
</html>
refresh函数在前端调用，而数据库查询在后端（PHP + MySQL）运行。有许多不同的选项可用，但我认为最简单的选项是使用AJAX请求来获取数据。首先通过在index.html中放置经过稍微修改的PHP代码来提取从api.php中检索的数据：