php-ajax調用json數據並將該數據傳遞給jguage js的小部件以顯示該值
[英]php-ajax call for json data and pass that data to jguage js for widget to show that value
問題描述
在這里，我想將名為value的ajax傳遞給同一文件中的另一個腳本（小部件腳本）。 我已經在單個頁面上成功完成了ajax調用和justgage小部件。 我可以成功打印使用php echo從ajax調用獲取的數據。 而不是使用echo顯示值，我想使用相同的值來顯示justgage小部件。 我在這里分享我的代碼。 data.php文件在這里
<?php
$selm=1;
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/raphael-2.1.4.min.js"></script>
<script src="js/justgage.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
#divDownloadOuter{
width: 55%;
height:50%;
clear: both;
}
</style>
<script type="text/javascript">
$(window).load(function () {
myFunction();
});
</script>
<script>
var d;
function myFunction() {
setInterval(function(){
$.ajax({
url: "datavalues.php?id=1&selm=<?php echo $selm ?>",
success: function(result){
ip = JSON.parse(result);
sr = parseFloat(ip["srno"]);
document.getElementById("demo1").innerHTML = sr;
document.getElementById("demo2").innerHTML = sr;
}
});
}, 2000);
}
</script>
</head>
<body>
<div id="divDownloadOuter">
<div id="jgDownload1"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var gD1 = new JustGage({
id: "jgDownload1",
value: 27,
decimals: 2,
min: 0,
max: 100,
valueFontFamily: "Georgia",
valueFontSize: "150px",
valueFontColor: "orange",
label: "%",
labelFontsize:"10px",
labelFontColor:"white",
width: 100,
height: 100,
relativeGaugeSize: true,
gaugeWidthScale: 0.8,
levelColors: [
"#E63454",
"#AC001F",
"#F6AD37",
"#B87200",
"#24A081",
"#007759",
"#026071",
"#015C71"
],
pointer: true,
counter: true,
});
});
</script>
<h3>value using element by id</h3>
<span id="demo1"></span>
<?php echo "<span id=\"demo2\"></span>"; ?>
</body>
</html>
datavalues.php文件在這里
<?php
//all values for selected meter encoded and retrive from dashboard 2
$con=mysqli_connect("localhost","root","digi","gmbg");
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if (isset($_GET['selm']) ){
$selm=$_GET['selm'];
$res3 = mysqli_query($con ,"SELECT * FROM meterstatus where `mtr_no` LIKE '$selm' and did='kirti' order by srno desc limit 1");
$row3= mysqli_fetch_assoc($res3);
echo json_encode($row3);
}
mysqli_close($con);
?>
在這里，我可以使用“ span id”和“ php echo”方法輕松顯示data.php文件中的值。 但是我想在justgage小部件中使用該值來顯示。 但我不能將此ajax調用數據值傳遞給另一個js（justgage）。 我嘗試了所有方法，但顯示“未定義”。 有什么解決辦法嗎？
1 個解決方案
解決方案1
3 已采納 2017-07-11 11:27:49
使用刷新函數gD1.refresh(40)例如，我只是使用setTimeout而不是ajax 。
ajax：在ajax成功部分中添加此代碼
refresh function gD1.refresh(response_data) // response_data is dynamically
var gD1 =''; document.addEventListener("DOMContentLoaded", function(event) { gD1 = new JustGage({ id: "jgDownload1", value: 27, decimals: 2, min: 0, max: 100, valueFontFamily: "Georgia", valueFontSize: "150px", valueFontColor: "orange", label: "%", labelFontsize:"10px", labelFontColor:"white", width: 100, height: 100, relativeGaugeSize: true, gaugeWidthScale: 0.8, levelColors: [ "#E63454", "#AC001F", "#F6AD37", "#B87200", "#24A081", "#007759", "#026071", "#015C71" ], pointer: true, counter: true, }); }); setTimeout(function(){ gD1.refresh(74); },1000);
<script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script> <script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script> <body> <div id="divDownloadOuter"> <div id="jgDownload1"></div> </div> </body>
php-Ajax：發送Float數據並獲取響應
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.