如何在我的网页上逐个打印json的密钥？
如何在我的网页上逐个打印json的密钥？
提问于 2015-05-26 09:43:11
我编写了以下php代码：
$q3 = $conn3->prepare("SELECT c.text as key1, c.timeframe as key2, p.date as key3 FROM table1 c, table2 p WHERE c.id = p.c_id");
$q3->execute();
if ($q3->rowCount() > 0)
{
$check3 = $q3->fetchAll(PDO::FETCH_ASSOC);
$arr = array();
foreach ($check3 as $row) {
$arr[] = $row;
}
echo json_encode(array('result'=>$arr));
}它在表单中返回json字符串：
{
"result": [{
"key1": "aa",
"key2": "15",
"key3": "2015-04-12 18:50:00"
}, {
"key1": "bb",
"key2": "30",
"key3": "2015-05-09 11:26:38"
}, {
"key1": "cc",
"key2": "45",
"key3": "2015-04-12 18:50:20"
},等等，现在我希望在另一个网页上打印这个结果，所以我首先在其中包含了以下脚本：
<script type="text/javascript">
function myFunction () {
$.getJSON('list.php', function(json) {
jQuery.each( json.result, function( i, subresult ) {
console.log(subresult);
});
});
}
var interval = setInterval(function () {
myFunction();
}, 60000);
</script>运行该网页后，我在控制台中看到结果--每分钟调用getJSON方法并在控制台中打印返回的结果。所以我基本上看到了控制台中的json字符串。然而，我想打印每个字符串在网页上一个一个-在同一个div，例如淡入/淡出效果。对于上面的示例，我希望看到15秒的"aa"，然后是30秒的"bb"和45秒的"cc" (持续时间存储为key2值)。
我添加了上面的间隔，因为一分钟后，我想从mysql数据库中获取另一个数据，并将其打印出来，以替代旧的数据，等等。你能帮我吗？谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-05-26 10:27:06
以下是您的解决方案：
<script type="text/javascript">
var results;
var cursor = 0;
function myFunction () {
$.getJSON('list.php', function(json) {
results = json.result;
cursor = 0;
// Now start printing
printNext();
});
}
function printNext(){
if(cursor == results.length){
// Reset the cursor back to the beginning.
cursor = 0;
}
// Print the key1 in the div.
$('#divTarget').html(results[cursor].key1);
// Set a delay for the current item to stay
// Delay is key2 * 1000 seconds
setTimeout(function(){
printNext();
}, results[cursor].key2 * 1000);
// Advance the cursor.
cursor++;
}
var interval = setInterval(function () {
myFunction();
}, 60000);
</script>Stack Overflow用户
发布于 2015-05-26 09:49:38
我正在创建一个演示div，您可以为每个对象一个接一个地附加结果。
<script>
function myFunction () {
$.getJSON('list.php', function(json) {
jQuery.each( json.result, function( i, subresult ) {
$("#demodiv").append(subresult);
});
});
}
var interval = setInterval(function () { myFunction(); }, 60000);
</script>
<body>
<div id="demodiv" ></div><!-- This is the div where the result will be appended -->
</body>编辑:根据您的额外要求：：
k = 1; //these are global variables
multi = 15;
times = '';
function myFunction () {
$.getJSON('list.php', function(json) {
jQuery.each( json.result, function( i, subresult ) {
$("#demodiv").append(subresult);
times = multi*k;
k++;
});
});
}
var interval = setInterval(function () { myFunction(); }, times);Stack Overflow用户
发布于 2015-05-26 09:46:19
将代码更改为：
<script type="text/javascript">
function myFunction () {
$.getJSON('list.php', function(json) {
jQuery.each( json.result, function( i, subresult ) {
$("#divId").append(subresult);
});
});
}
var interval = setInterval(function () { myFunction(); }, 60000);
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30454963
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号