ajaxstart/ajaxsetup을 사용한 jQuery ajax 로딩

jQuery ajax 및 가있는로드 이 안내서는 ajax 요청 중에 로딩 표시기를 관리하기 위해 jQuery의 ajaxStart() 및 메소드를 사용하는 것을 보여줍니다. 우리는 이러한 방법을 직접 사용하고, Ajax 호출에 통합하고, 를 활용하는 등 여러 가지 방법을 다룹니다. ajaxStop() 메소드 1 : 및 ajaxStart() ajaxStop() ajaxSetup()의 직접 사용 이 메소드는로드 이미지를 표시하고 AJAX 요청이 진행되는 동안 양식의 제출 버튼을 비활성화합니다. 요청이 완료되면 이미지가 숨겨지고 버튼이 다시 활성화됩니다. 메소드 2 : 전하 표시기 전 및

handler 또는 ajax 호출 전에 로딩 표시기를 표시하고

핸들러를 사용하여 숨길 수 있습니다.

메소드 3 : 글로벌 처리 에 ajaxStart()를 사용합니다 모든 AJAX 요청에 영향을 미치는 글로벌 솔루션의 경우 ajaxStop()를 사용하십시오. 이렇게하면 로딩 이미지를 숨기고 All

자주 묻는 질문

다음 Q & A 섹션에서는 ,

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

및 관련 jQuery ajax 메소드 사용에 대한 일반적인 질문을 다룹니다. 원래 FAQ 섹션은 명확성과 간결함을 위해 응축되고 다시 게시되었습니다.

complete 목적 :

AJAX 요청이 시작되고 다른 요청이 활성화되지 않을 때 함수를 실행합니다. 로딩 표시기를 표시하는 데 이상적입니다

complete

로딩 스피너 표시 :

<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 요청이 완료되면 스피너를 숨기려고합니다.

ajaxSetup() 특정 요청과 함께 :

ajax 요청을 시작하는 요소에 바인드

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

vs.

:

ajaxStart() 다른 Ajax 요청이 실행되지 않을 때만 트리거됩니다. 모든 요청에 ​​대한 트리거 ajaxStop()

오류 처리 :

와 함께 를 사용하여 오류를 처리하십시오. 예를 들면 :
• 다른 Ajax 방법과 결합 :

  다른 jQuery ajax 방법 (, , 등)과 함께 작동합니다. ajaxStart() ajaxStop() ajaxComplete() 속기 방법과 함께 사용 : ajaxError() 및 .

• 이 개정 된 응답은 주요 측면과 일반적인 질문을 다루는 jQuery ajax 로딩 기술에 대한보다 간결하고 구성된 설명을 제공합니다. 이미지는 원래 위치에 남아 있습니다.

위 내용은 ajaxstart/ajaxsetup을 사용한 jQuery ajax 로딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!