1

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

我有一个每秒更新的 html 文件。该文件是完全静态的，我仅将其用于日志目的。

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

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

我在这里实现了第一个版本，它只是打印相同的 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 开发。

我错过了什么？

4

4 回答 4

7

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

你在 setTimeout 中运行 worker。你需要去掉 () 或者你需要把它放在''中：

setTimeout(worker, 1000);

或者

setTimeout('worker()', 1000);

*编辑：为了防止缓存，将 url 更改为：

 url : 'http://jlengrand.pythonanywhere.com/static/leader.html?rand='+Math.random(),
于 2013-02-01T18:24:49.277 回答
3

似乎您没有在准备好文档时调用工作函数。因此循环不会被启动。请记住，如果您调用位于不同域的文件，您将面临跨域问题。

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

 <!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>
于 2013-02-01T18:36:43.500 回答
2

每件事都是正确的，但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);
        }
      });
    })();
});
于 2013-02-01T18:39:53.473 回答
0

使用 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();
于 2013-02-01T18:53:20.917 回答