Question

我正在开发一个小型Web应用程序。我已经完成了服务器端代码，但我正在努力与客户端javascript。

我的an html file每秒更新一次。此文件是完全静态的，我仅将其用于日志目的。

这个想法是做同样的事情，但是在客户端完成了自动更新。

为此，我想使用ajax进行数据库轮询。

我已经实现了a first version here，它只是打印相同的html文件，并且应该每秒重新加载它。

即使我在javascript控制台客户端没有看到任何错误，但事情是不更新。找到该文件，因为它正确加载，我没有看到为什么它不会更新我的div的任何原因。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- Using Google CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
        (function worker() {
          $.ajax({
            url : 'http://jlengrand.pythonanywhere.com/static/leader.html',
            success: function(data) {
              $('.text').html(data);
            },
            complete: function() {
              setTimeout(worker, 1000);
            }
          });
        })();
    </script>
</head>
<body>
    <div class="text">
        To be loaded <br />
    </div>
</body>
</html>

我在本地尝试过（但文件较小）并且工作正常。

我知道重新加载整个文件并不聪明，但我想逐步构建，因为这是我第一次用JavaScript开发。

我错过了什么？

Answer 1

错误：无用的setTimeout调用（参数周围缺少引号？）

您在setTimeout中运行worker。你需要删除（）或者你需要把它放在''：

中

setTimeout(worker, 1000);

或

setTimeout('worker()', 1000);

*编辑：要防止缓存，请将URL更改为：

 url : 'http://jlengrand.pythonanywhere.com/static/leader.html?rand='+Math.random(),

Answer 2

好像你没有在文档就绪上调用worker函数。因此循环不会启动。请记住，如果您呼叫位于其他域的文件，您将面临跨域问题。

检查此代码，它可以解决您的问题：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <!-- Using Google CDN -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
   <script type="text/javascript">
    $(document).ready(function(){
       worker();
    });

    function worker(){
        $.ajax({
            url: 'http://jlengrand.pythonanywhere.com/static/leader.html',
            success: function(data) {
                console.log(data);  
                $('.text').html(data);
            },
            complete: function() {
                  setTimeout(worker(), 1000);
            }
        });
    }
   </script>
 </head>
 <body>
   <div class="text">
       To be loaded <br />
   </div>
</body>
</html>

Answer 3

每件事都是正确的，但doc ready缺失：

$(function(){
    (function worker() {
      $.ajax({
        url : 'http://jlengrand.pythonanywhere.com/static/leader.html',
        success: function(data) {
          $('.text').html(data);
        },
        complete: function() {
          setTimeout(function(){ // use this way
             worker();
          }, 1000);
        }
      });
    })();
});

Answer 4

使用Deferred

在最后一次加载后重新加载1秒的替代解决方案

function getData() {
    $.ajax({
        url: 'http://jlengrand.pythonanywhere.com/static/leader.html',
        success: function (data) {
            $('.text').html(data);
        },
        complete: function () {}
    });
}

function showDiv() {
    var dfd = $.Deferred();
    $('.text').fadeTo(1000, 1, dfd.resolve);
    return dfd.promise();
}

function startme() {
    $.when(getData(), showDiv())
        .then(function (ajaxResult) {
        // ‘ajaxResult’ is the server’s response
            startme();
    });
};
startme();

settimeout在ajax调用中无法正常工作

4 个答案: