使用ajaxstart/ajaxsetup加載jquery ajax

jQuery ajax加載ajaxStart()>和ajaxStop()

>

本指南使用jQuery的ajaxStart()和ajaxStop()>在AJAX請求期間管理加載指示器的方法。 我們將介紹幾種方法，包括直接使用這些方法，將其納入Ajax調用，並利用ajaxSetup()>。

方法1：直接使用>>ajaxStart()ajaxStop()

>

此方法在進行AJAX請求時顯示加載圖像並禁用表單的提交按鈕。 請求完成後，圖像將被隱藏，並重新啟用按鈕。

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

方法2：加載指示器和處理程序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>

用於全局處理

> ajaxSetup()對於影響所有AJAX請求的全局解決方案，請使用。 這隱藏了加載圖像，並啟用了

ajax請求後的表單。 ajaxSetup()

>常見問題

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

>以下問答部分解決了有關使用，

和相關的jQuery ajax方法的常見問題。 請注意，原始的常見問題解答部分已被凝結並改寫，以清晰和簡潔。

> ajaxStart() ajaxStop()

• 目的：

  > 當ajax請求開始時執行功能，並且沒有其他請求活動。它是顯示加載指示器的理想選擇。 ajaxStart()> ajaxStart()

顯示一個加載旋轉器：
• 創建一個旋轉器元素（例如，

  ）。使用顯示它。 <div id="spinner"> <code>$(document).ajaxStart(function(){ $("#spinner").show(); }); >>隱藏旋轉器：

• 使用

  在所有ajax請求完成時都可以隱藏旋轉器。 $(document).ajaxStop(function(){ $("#spinner").hide(); });

• >帶有特定請求： bind bint 啟動ajax請求的元素（例如，

  ）。 ajaxStart() ajaxStart() $("#myButton").ajaxStart(...) vs.

  ：

• >僅在沒有其他AJAX請求運行時觸發； 觸發每個請求的觸發器。 ajaxStart() ajaxSend() ajaxStart() ajaxSend()錯誤處理：

  在
上使用
• 來處理錯誤。 例如：

• 與其他AJAX方法結合：

  ：ajaxStart()>與其他jquery ajax方法（ajaxStop()，ajaxComplete()，ajaxError()，等）一起使用。

• >使用速記方法：ajaxStart()> $.get()和$.post()和

  。

這種修訂後的響應提供了對JQuery Ajax加載技術的更簡潔，有組織的解釋，解決了關鍵方面和常見問題。 圖像保持原始位置。