具有 Ajax 功能的页面不刷新数据答案

【问题标题】：Page with Ajax function does not refresh data具有 Ajax 功能的页面不刷新数据
【发布时间】：2011-03-25 15:47:09
【问题描述】：

我的脚本运行良好。但是，内容不会自行刷新以获取新数据。为什么会这样？

 function updateMsg() {
    $.ajax({
       url: "/recent/notifications/",
       cache: false,
       success: function(html){     
         $("#profile_notifarea_msgbox").html(html);
       }
    });
    setTimeout('updateMsg()', 4000);
 }
 updateMsg();

【问题讨论】：

更多详情？您的内容不刷新？我不明白。
应该没什么区别，但你的“setTimeout”调用可以只是setTimeout(updateMsg, 4000);。 FireBug 对 ajax 调用的响应显示什么？
...有新数据要显示吗？
您的内容是否通过 AJAX 调用正确返回？您是否使用 Firefox 通过 Firebug 检查了内容？如果您还没有的话，可以做这样的事情的惊人工具。
你的成功回调执行了吗？ profile_notifarea_msgbox 是您要更新的元素的正确 ID 吗？不确定这是否是一个错字，应该是 profile_notifyarea_msgbox。

标签： javascript jquery ajax partial-page-refresh

【解决方案1】：

你的 setTimeout 可以直接引用 updateMsg 而不是使用字符串：

var timeout;

function updateMsg() {
   $.ajax({
      url: "/recent/notifications/",
      cache: false,
      success: function(html){     
        $("#profile_notifarea_msgbox").html(html);
        timeout = setTimeout(updateMsg, 4000);
      }
   });       
}
updateMsg();   

function stopUpdate() {
    clearTimeout(timeout);
}

要停止持续更新，您可以在变量中保存对 setTimeout 的引用，然后调用 clearTimeout 并传入该变量。在本例中，您只需调用函数 stopUpdate() 即可取消更新。

【讨论】：

如果将 updateMsg() 放在 Success 回调中，这还不够吗？我认为这个想法是在返回数据后更新页面，这样您就可以一起取消超时。
@Luke 然后它会在得到结果后立即再次调用。根据来自网络服务器的响应速度，它可能每秒多次触发 ajax 请求。
@infernal 你的代码行和我的有什么区别？我确实有 $(document).ready 只是它太长了，不能放在这里
@pivotal 只是它将函数传递给 setTimeout 而不是字符串。这是一种更好的方法。 updateMsg 函数是否被重复调用？您可以通过在 firebug 中放置断点或仅添加警报来进行检查。我已经更新了答案以显示我可以使用的代码。
@infernalBadger 在这里有很好的洞察力。事实证明，当我使用自己的代码时，警报不会触发两次以上。但是，使用您的代码行，警报每 4 秒连续弹出一次。因此，我相信它现在正在工作..谢谢:)

【解决方案2】：

当你在 jQuery 中使用 ajax 时，试着总是放一个错误函数，这样你就可以识别请求是否有问题

【讨论】：