我真的陷入了我想要显示仪表的网页,它会使用MySQL数据库中的新数据进行自我更新。我有几个文件可以让它工作,但它不起作用。第一个文件名为data.php,它包含(抱歉,荷兰语评论):
<?php
// Datum aanmaken om bovenaan de pagina te zetten
date_default_timezone_set('Europe/Amsterdam');
$vandaagtijd = date("d-m-Y, H:i");
include_once "/externalpw/mysql_pw.php";
$link = mysql_pconnect($MyHostname, $MyUsername, $MyPassword) or die("Error verbinden met DB: " . mysql_error());
//Eerst de elektra en het gas selecteren in die database en dan daarmee aan de gang
$db = mysql_select_db("elekgas", $link);
if (!$db) {
mysql_close($link);
die("Error selecteren DB: " . mysql_error());
}
// Actuele waaarden op van huidig verbruik en meterstanden
$result1 = mysql_query("SELECT gebr_laag_tarief AS glt, gebr_hoog_tarief AS ght, leve_laag_tarief AS llt, leve_hoog_tarief AS lht, huidig_verbruik AS hv, huidig_levering AS hl, gas FROM meetwaarden ORDER BY id DESC LIMIT 1");
if (!$result1) {
mysql_close($link);
die("Error met query1: " . mysql_error());
}
while ($row = mysql_fetch_assoc($result1)) {
$data[] = $row;
}
?>
var jsonarray = <?php echo json_encode($data); ?>;
在第二个文件中,我的主文件,我有这个部分来刷新php输出:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });
$.post('index4.php'), function(data){
$(data.result).each(function(i, item){
$.append("<?= $" + item.key + " = " + item.value + "; ?>");
});
}, "jsonp");
});
</script>
我要刷新的div几乎没有任何内容。我只是想为仪表返回一个新值。仪表本身将使用间隔功能来更新自己。为了清楚起见,该规范代码在下方。然而,会发生什么,它会返回NaN(非数字)。我觉得有必要在这里暗示一些JSON_encode以使它全部正常工作但我不知道如何让它继续下去。
在data.php echo JSON_encode($result1);
似乎是一个好的开始但是如何在主文件中找到它?显然,负载(&#39; data.php&#39;)不是这里的方式......
<canvas id="gauge2"
width="200" height="200"
data-type="canv-gauge"
data-title="Vermogen"
data-min-value="0"
data-max-value="400"
data-major-ticks="0 100 200 300 400"
data-minor-ticks="5"
data-stroke-ticks="true"
data-units="kWh"
data-value-format="3.2"
data-glow="true"
data-animation-delay= false
data-animation-duration=
data-animation-fn=
data-colors-needle="#dd0000 #0000ff"
data-highlights="0 100 #a9feff, 100 300 #bbffaa, 300 400 #ffffaa"
data-onready="setInterval( function() { Gauge.Collection.get('gauge2').setValue(<?= $hl; ?>);}, 5000);">
</canvas>
我知道这些问题已经多次出现,但我不是真正的明星,因为它涉及到AJAX和JSON。所以所有的帮助表示赞赏!感谢。
答案 0 :(得分:2)
你应该在JS中使用jQuery的post
,在PHP中使用json_encode
。
一旦你有一个复杂的JSON对象,请阅读Access / process (nested) objects, arrays or JSON以了解如何访问它的项目,然后试试我为你写的JSFiddle example,它会从iTunes的公共API和把它们放在桌子上。
答案 1 :(得分:0)
为了方便起见,我在这里发布我的解决方案。
PHP-文件:
while ($row = mysql_fetch_array($result1)) {
$data = $row;
}
//echo json_encode($data, JSON_NUMERIC_CHECK);
array_push($json, $data);
echo json_encode($json);
?>
JS-部分:
<script type="text/javascript">
var glt;
var ght;
var llt;
var lht;
var hv;
var hl;
var gas;
$(document).ready(function() {
$.ajax({
type: "POST",
url: "data.php",
dataType: "JSON",
success: function(data){
glt = data[0].glt;
ght = data[0].ght;
llt = data[0].llt;
lht = data[0].lht;
hv = data[0].hv;
hl = data[0].hl;
gas = data[0].gas;
}
});
});
</script>
Gauge-part只是使用我想要显示的正确变量。
非常感谢Alessio Cantarella的帮助。他确实指出了我最终的正确方向:)