重复 jQuery ajax 调用

Posted

技术标签:

【中文标题】重复 jQuery ajax 调用【英文标题】:Repeat jQuery ajax call 【发布时间】:2011-07-05 16:26:37 【问题描述】:

如何每 10 秒重复一次 jQuery ajax 调用?

$(document).ready(function() 
    $.ajax(    
        type: "GET",    
        url: "newstitle.php",   
        data: "user=success",    
        success: function(msg) 
            $(msg).appendTo("#edix");    
          
    );

我尝试用函数包装 $.ajax 并使用 setInterval 调用该函数

$(document).ready(function() 
    function ajaxd()  
        $.ajax(
            type: "GET",
            url: "newstitle.php",
            data: "user=success",
            success: function(msg) 
                $(msg).appendTo("#edix");
            
        );
    
    setInterval("ajaxd()",10000);
);

但它说“没有定义ajaxd”

【问题讨论】:

【参考方案1】:

您的方法不应放在 ready 方法内,否则它会只在那里可用,而不能在外部使用。

$(document).ready(function() 
    setInterval(ajaxd, 10000);
);

function ajaxd()  
  $.ajax(
   type: "GET",
   url: "newstitles.php",
   data: "user=success",
   success: function(msg)
     $(msg).appendTo("#edix");
   
 );

【讨论】:

别说thank you,直接点赞 --> blog.***.com/2011/01/how-to-say-thanks-in-an-answer 我知道。但是当我尝试时它说“您可以在 5 分钟内批准答案。” “等待的人会有好运”【参考方案2】:

更好的方法是使用setTimeout,这样您只有在前一个请求完成后才发出请求。

应该怎么做

想象一下由于某种原因(服务器故障、网络错误)的请求比定义的时间长。您将有许多同时请求,这没有任何好处。如果你决定在未来将时差从 10 秒缩短到 1 秒呢?

$(function() 
  var storiesInterval = 10 * 1000;
  var fetchNews = function() 
    console.log('Sending AJAX request...');
    $.ajax(
      type: "GET",
      url: "newstitles.php",
      data: 
        user: 'success',
        some: ['other', 'data']
      
    ).done(function(msg) 
      $(msg).appendTo("#edix");
      console.log('success');
    ).fail(function() 
      console.log('error');
    ).always(function() 
      // Schedule the next request after this one completes,
      // even after error
      console.log('Waiting ' + (storiesInterval / 1000) + ' seconds');
      setTimeout(fetchNews, storiesInterval);
    );
  
  
  // Fetch news immediately, then every 10 seconds AFTER previous request finishes
  fetchNews();
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我知道,6 年后。但是,我仍然认为这对其他人来说是值得的。

为什么 OP 的代码不起作用?

值得注意的是,您的代码主要不起作用,因为您将ajaxd() 函数调用作为字符串传递给setInterval。这不是一个好的做法,部分原因是setInterval 期望函数全局定义。您应该使用对函数的引用,就像在我的示例中一样。这样,您的函数在哪里定义以及它是否是匿名的都无关紧要。

【讨论】:

【参考方案3】:
$(document).ready(function() 

setInterval(function()  
  $.ajax(
   type: "GET",
   url: "newstitle.php",
   data: "user=success",
   success: function(msg)
     $(msg).appendTo("#edix");
   
 );
, 10000);

);

【讨论】:

以上是关于重复 jQuery ajax 调用的主要内容,如果未能解决你的问题,请参考以下文章

jquery如何进行多个ajax调用[重复]

如何通过onRowSelect ajax事件调用jQuery? [重复]

使用 Jquery $.ajax 在 Flask 上调用服务器端函数 [重复]

JQuery ajax调用在200上执行错误[重复]

无法从 jQuery Ajax 调用中获得正确的返回值 [重复]

jQuery Validator异步调用[重复]