Статьи

JQuery Ajax Загрузка с использованием ajaxStart / ajaxSetup

Примеры фрагментов кода jQuery о том, как использовать функции jQuery.ajaxStart и jQuery.ajaxStop . Примеры ниже.

Использование методов ajaxStart и ajaxStop

В приведенном ниже примере мы использовали его для отображения загружаемого изображения и отключения кнопки отправки формы после ее нажатия во время обработки запроса ajax. И затем, когда он возвращается, изображение скрыто, и кнопка отправки снова становится доступной.

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'); }); 

Использование вставленного кода перед ajax

Другим методом может быть добавление изображения перед вызовом ajax.

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

А затем добавьте полный обработчик к функции ajax.

 //hide loading image, enable submit button again complete: function() { $form.find('.loading').hide(); $form.find('.submit').removeAttr('disabled'); } 

Использование ajaxSetup ()

Еще один метод — использовать jQuery.ajaxSetup, чтобы изображение было скрыто и форма была включена, когда все запросы ajax возвращаются «выполненными».

 $.ajaxSetup( { complete:function() { $form.find('.loading').hide(); $form.find('.submit').removeAttr('disabled'); } });