ホームページ > ウェブフロントエンド > jsチュートリアル > ajaxstart/ajaxsetupを使用したjquery ajaxの読み込み

ajaxstart/ajaxsetupを使用したjquery ajaxの読み込み

Jennifer Aniston
リリース: 2025-02-27 09:04:09
オリジナル
224 人が閲覧しました

jQuery ajax ajaxStart()およびajaxStop()

で読み込まれます このガイドは、AJAXリクエスト中にロードインジケーターを管理するためのjQueryの

およびajaxStart()メソッドを使用して実証しています。 これらの方法を直接使用し、それらをAjaxコールに組み込むこと、ajaxStop()ajaxSetup()

jQuery Ajax Loading using ajaxStart/ajaxSetup

メソッド1:

および ajaxStart() ajaxStop()の直接使用 このメソッドには、Ajaxリクエストが進行中のフォームの送信ボタンが表示され、フォームの送信ボタンが無効になります。 リクエストが完了すると、画像が非表示になり、ボタンが再度有効になります。

メソッド2:前のインジケーターをロードすると
var $form = $('#form');

$form.find('.loading')
  .hide()
  .ajaxStart(function() {
      $(this).show();
      $form.find('.submit').attr('disabled', 'disabled');
  })
  .ajaxStop(function() {
      $(this).hide();
      $form.find('.submit').removeAttr('disabled');
  });
ログイン後にコピー
ハンドラー

completeまたは、AJAXの呼び出しの前に読み込みインジケーターを表示し、ハンドラーを使用して非表示にすることができます。

completeメソッド3:グローバル処理に

を使用
// Show loading image, disable submit button
$form.find('.msg').remove();
$form.find('.loading').show();
$form.find('.submit').attr('disabled', 'disabled');

// AJAX call
$.ajax({
    // ... your AJAX settings ...
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});
ログイン後にコピー

すべてのAJAXリクエストに影響を与えるグローバルソリューションの場合、を使用します。 これにより、読み込み画像が隠され、ajaxSetup()の後にフォームを有効にします。

よくある質問ajaxSetup() 次のQ&Aセクションでは、

$.ajaxSetup({
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});
ログイン後にコピー
、および関連するjQuery ajaxメソッドの使用に関する一般的な質問について説明します。 元のFAQセクションは、明確さと簡潔さのために凝縮され、言い換えられていることに注意してください。

目的:ajaxStart()ajaxStop()ajax要求が開始され、他のリクエストがアクティブになっているときに関数を実行します。読み込み指標を表示するのに最適です

  • 荷重スピナーを表示:スピナー要素を作成します(例:ajaxStart())。 を使用して表示します。ajaxStart()

  • スピナーを隠している
  • すべてのajax要求が完了したときにスピナーを非表示にするためにを使用してください。 <div id="spinner"> <code>$(document).ajaxStart(function(){ $("#spinner").show(); });

  • 具体的なリクエストを使用してください:

    ajax要求を開始する要素(例えば、)にバインドします。 $(document).ajaxStop(function(){ $("#spinner").hide(); });

  • vs.

    ajaxStart()他のajax要求が実行されていない場合にのみトリガーします。すべてのリクエストをトリガーします。 ajaxStart() $("#myButton").ajaxStart(...)

  • エラー処理:
  • を使用してを使用してエラーを処理します。 たとえば、ajaxStart()ajaxSend()

  • 他のajaxメソッドと組み合わせる: ajaxStart()他のjquery ajaxメソッド(ajaxStop()ajaxComplete()ajaxError()など)と連携します。

  • ショートサンドの方法で使用:ajaxStart()$.get()$.post()

  • この改訂された応答は、重要な側面と一般的な質問に対処するJQuery Ajaxの負荷技術のより簡潔で組織化された説明を提供します。 画像は元の位置に残ります。

以上がajaxstart/ajaxsetupを使用したjquery ajaxの読み込みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート