Question

我写了以下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中，例如淡入/淡出效果。对于上面的示例，我希望"aa"持续15秒，然后"bb"持续30秒，"cc"持续45秒（持续时间存储为key2值）。

我添加了上面的间隔，因为一分钟之后我想从mysql数据库中获取另一个数据并打印它而不是旧数据，依此类推。你能帮帮我吗？谢谢！

Answer 1

我正在创建一个演示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);

Answer 2

以下是您的解决方案：

<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>

Answer 3

将代码更改为：

<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>

如何逐个打印我网页上的json键？

3 个答案: