jQuery ajax只更新div一次

时间:2013-01-30 22:22:11

标签: php jquery ajax

我目前正在玩ajax尝试创建一个脚本,该脚本从实时更新的数据库中返回一个值。

HTML

<!doctype html>
<html lang="en-gb">
<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            liveReload('#ajax');
        });
    </script>
    <meta charset="utf-8">
</head>
<body>
    <section id="ajax">0</section>
</body>
</html>

PHP

<?php

class Ajax
{
    public static function grab()
    {
        try
        {
            $db = new PDO('mysql:host=localhost;dbname=ajax', 'root', null);
            $rq = $db->query('select setting, value from test');
            return $rq->fetchAll(PDO::FETCH_ASSOC)[0];
        }
        catch (PDOException $e)
        {
            echo $e->getMessage();
        }
    }
}

echo json_encode(Ajax::grab());

JQUERY

(function() {

liveReload = function(element) {
    $.ajax({
        url: 'ajax.php',
        dataType: 'json',
        cache: false,
        success: function(data)
        {
            $(element).html(data['value']);
            setTimeout(liveReload, 1000);
        }
    })
}

})(jQuery);

问题是这个值只在页面中更新一次,尽管函数在更新时返回新值。

1 个答案:

答案 0 :(得分:2)

正如我在评论中所说的那样:你没有将元素传递给setTimeout,所以它放弃了对元素的引用并且实际上没有显示任何内容

setTimeout(function() {liveReload(element);}, 1000);