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

jQuery ajax ajaxStart()およびajaxStop()

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

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

メソッド1：

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

メソッド2：前のインジケーターをロードすると

<code class="language-javascript">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');
  });</code>

ハンドラー

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

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

を使用

<code class="language-javascript">// 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');
    }
});</code>

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

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

、

<code class="language-javascript">$.ajaxSetup({
    complete: function() {
        $form.find('.loading').hide();
        $form.find('.submit').removeAttr('disabled');
    }
});</code>

、および関連する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の負荷技術のより簡潔で組織化された説明を提供します。 画像は元の位置に残ります。