ホームページ  >  記事  >  バックエンド開発  >  jQuery Ajax を使用して 10 秒ごとにデータを継続的にフェッチするにはどうすればよいですか?

jQuery Ajax を使用して 10 秒ごとにデータを継続的にフェッチするにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-04 03:53:29857ブラウズ

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

jQuery: 10 秒ごとに Ajax を呼び出す

指定されたシナリオの目標は、Ajax を使用して 10 秒ごとに div に新しいフィードバック項目を表示することです。ただし、提供されたコードは 2 つの項目のみを表示してから停止します。

問題は、コードに Ajax 呼び出しを定期的に開始するメカニズムが欠けていることです。これを実現するには、setInterval() 関数の使用を検討してください。

setInterval()

setInterval() 関数は、コールバック関数とミリ秒単位の間隔を引数として受け取ります。指定された間隔が経過した後にコールバック関数を実行し、クリアされるまで実行を続けます。

たとえば、次のように setInterval() を使用できます。

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

このコードは、 get_fb() 関数を 10 秒ごとに呼び出します。

Ajax 呼び出し完了コールバック

あるいは、完了時に Ajax 呼び出しで次の呼び出しを開始することもできます。これは、Ajax 呼び出しの success() または complete() メソッドを使用して実現できます。

Using 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>

Using 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 呼び出し完了コールバックを使用すると、定期的な間隔で新しいフィードバック項目を継続的に取得して表示できるため、停止する前に 2 つの項目しか表示されないという問題が解決されます。

以上がjQuery Ajax を使用して 10 秒ごとにデータを継続的にフェッチするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。