一次只显示数据库中的一个项目,并在时间周期中循环显示其他项目

时间:2014-07-12 13:14:49

标签: javascript php jquery sql ajax

我有一个项目,要在我办公室的主屏幕上显示一些细节,但问题是我只想显示项目时间,然后在时间段内循环显示每个项目。

下面是我的php,Java Sciptis和索引页面。

的index.html

<ul></ul>
<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="script/my_script.js"></script>

fetch.php

<?php
        include_once('db.php');

        $sql = "SELECT * FROM employee";
        $res = mysql_query($sql);
        $result = array();

        while( $row = mysql_fetch_array($res) )
            array_push($result, array('ID' => $row[0],
                                      'Name'  => $row[1],
                          'Post' => $row[2]));

        echo json_encode(array("result" => $result));
?>

my_script.js

$(document).ready( function(){
done(); 

});

function done() {
    setTimeout(function() {
        updates();
        done();
        },200);

}

function updates() {
$.getJSON("fetch.php", function(data) {
    $("ul").empty();

    $.each(data.result,function(){
        $("ul").append("<li>ID: "+this['ID']+"</li><li>Name: "+this['Name']+"</li><li>Designation: "+this['Post']+"</li><br />");
    });
}); 
}

我没有写过这个剧本。所以我需要一些帮助由于上面的脚本会显示项目而不刷新它,我想一​​次只显示项目。

感谢!!!

1 个答案:

答案 0 :(得分:1)

根据您的评论,我认为这对您有用。它在页面加载时获取一次数据,然后无限循环(当它到达数据末尾时再次从头开始)。

var i = 0; // index of data to iterate.
var d = null; // where we store the result of the query.
var interval = 1000; // interval in ms.

$(document).ready(function()
{
    // get the data *once* when the page loads.
    $.getJSON('fetch.php', function(data)
    {
        // store the data in the global var 'd'.
        d = data.result;

        // create a recurring call to update().
        setInterval(function()
        {
            update();
        },
        interval);
    });
});

function update()
{
    // if there isn't another element, reset to the first one.
    if (!d[i]) i = 0;

    // remove previous item from page.
    $('ul').empty();

    // add next item to page.
    $("ul")
        .append(
            '<li>ID: ' + d[i]['ID']
            + '</li><li>Name: ' + d[i]['Name']
            + '</li><li>Designation: ' + d[i]['Post']
            + '</li>'
        );

    // increment index for next iteration.
    i++;
}

在到达最后一条记录后重新获取的替代版本

var i = 0, // index of data to iterate.
    d = null, // where we store the result of the query.
    x = null, // stored interval so clearInterval() can be used.
    interval = 1000; // interval in ms.


$(document).ready(function()
{
    fetch();
});

function fetch()
{
    // get the data *once* when the page loads.
    $.getJSON('fetch.php', function(data)
    {
        // store the data in the global var 'd'.
        d = data.result;

        // create a recurring call to update().
        x = setInterval(function()
        {
            update();
        },
        interval);
    });
}

function update()
{
    // if there isn't an array element, reset to the first one.
    if (!d[i]) {
        clearInterval(x);
        i = 0;
        fetch();
        return;
    }

    // remove previous item from page.
    $('ul').empty();

    // add next item to page.
    $("ul")
        .append(
            '<li>ID: ' + d[i]['ID']
            + '</li><li>Name: ' + d[i]['Name']
            + '</li><li>Designation: ' + d[i]['Post']
            + '</li>'
        );

    // increment index for next iteration.
    i++;
}