首页  >  文章  >  后端开发  >  如何使用 jQuery Ajax 每 10 秒持续获取数据?

如何使用 jQuery Ajax 每 10 秒持续获取数据?

Patricia Arquette
Patricia Arquette原创
2024-11-04 03:53:29851浏览

How to Continuously Fetch Data with jQuery Ajax Every 10 Seconds?

jQuery:每 10 秒调用 Ajax

在给定的场景中,目标是使用 Ajax 每 10 秒在 div 中显示新的反馈项。然而,提供的代码只显示了两项,然后就停止了。

问题是代码缺少定期发起 Ajax 调用的机制。要实现此目的,请考虑使用 setInterval() 函数。

setInterval()

setInterval() 函数采用回调函数和以毫秒为单位的间隔作为其参数。它会在指定的时间间隔过去后执行回调函数,并继续执行,直到清除。

例如,您可以使用 setInterval() 如下:

<code class="javascript">setInterval(function(){get_fb();}, 10000);</code>

此代码将每 10 秒调用一次 get_fb() 函数。

Ajax 调用完成回调

或者,您可以让 Ajax 调用在完成后启动下一个。这可以使用 Ajax 调用的 success() 或complete() 方法来实现。

使用 success():

<code class="javascript">function get_fb(){
    var feedback = $.ajax({
        type: "POST",
        url: "feedback.php",
        async: false
    }).success(function(){
        setTimeout(function(){get_fb();}, 10000);
    }).responseText;

    $('div.feedback-box').html(feedback);
}</code>

使用complete ():

<code class="javascript">function get_fb(){
    var feedback = $.ajax({
        type: "POST",
        url: "feedback.php",
        async: false
    }).complete(function(){
        setTimeout(function(){get_fb();}, 10000);
    }).responseText;

    $('div.feedback-box').html(feedback);
}</code>

一旦当前的 Ajax 调用完成,这两个方法都会启动下一个 Ajax 调用。

结论

setInterval( 的使用) 或 Ajax 调用完成回调允许定期连续检索和显示新的反馈项,解决停止前只显示两项的问题。

以上是如何使用 jQuery Ajax 每 10 秒持续获取数据?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn