Как показать обработку анимации/прядильщика во время запроса ajax?

Question

Я хочу создать базовую прядильщицу или обрабатывать анимацию во время обработки моего AJAX POST. Я использую JQuery и Python. Я посмотрел документацию, но не могу точно определить, где поставить функции ajaxStart и ajaxStop.

Вот мои ЯШИ:

<script type="text/javascript"> 
     $(function() { 
     $('.error').hide(); 
     $("#checkin-button").click(function() { 
      var mid = $("input#mid").val(); 
      var message = $("textarea#message").val(); 
      var facebook = $('input#facebook').is(':checked'); 
      var name = $("input#name").val(); 
      var bgg_id = $("input#bgg-id").val(); 
      var thumbnail = $("input#thumbnail").val(); 
      var dataString = 'mid='+mid+'&message='+message+'&facebook='+facebook+'&name='+name+'&bgg_id='+bgg_id+'&thumbnail='+thumbnail; 
      $.ajax({ 
      type: "POST", 
      url: "/game-checkin", 
      data: dataString, 
      success: function(badges) { 
      $('#checkin-form').html("<div id='message'></div><div id='badges'></div>"); 
      $('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>"); 
      $.each(badges, function(i,badge) { 
       $('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='"+badge.image_url+"'><span class='badge-title'>"+badge.name+"</span></p>"); 
      }); 
      } 
     }); 
     return false; 
    }); 
    }); 
    </script> 

Answer 1

$.ajax({ 
      type: "POST", 
      url: "/game-checkin", 
      data: dataString, 
      beforeSend: function() { 
       ... your initialization code here (so show loader) ... 
      }, 
      complete: function() { 
       ... your finalization code here (hide loader) ... 
      }, 
      success: function(badges) { 
      $('#checkin-form').html("<div id='message'></div><div id='badges'></div>"); 
      $('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>"); 
      $.each(badges, function(i,badge) { 
       $('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='"+badge.image_url+"'><span class='badge-title'>"+badge.name+"</span></p>"); 
}); 

http://api.jquery.com/jQuery.ajax/:

Вот обратного вызова крючки, предоставляемые $ .ajax():

beforeSend обратного вызова; он получает объект jqXHR и карту настроек в качестве параметров. вызовы обратного вызова вызываются в том порядке, в котором они зарегистрированы, если запрос не выполняется. Они получают jqXHR, строку, указывающую тип ошибки, и объект исключения, если это применимо. Некоторые встроенные ошибки будут содержать строку в качестве объекта исключения: «abort», «timeout», «No Transport». Обратный вызов dataFilter вызывается сразу после успешного получения данных ответа. Он получает возвращенные данные и значение dataType и должен возвращать (возможно измененные) данные, чтобы перейти к успеху. затем вызываются обратные вызовы в том порядке, в котором они зарегистрированы, если запрос успешно завершен. Они получают возвращенные данные, строку, содержащую код успеха, и объект jqXHR. завершают обратные вызовы, в том порядке, в котором они зарегистрированы, когда запрос заканчивается, в случае неудачи или успеха. Они получают объект jqXHR, а также строку, содержащую код успеха или ошибки.

Обратите внимание, что перед отправкой и полным дополнением к коду.

Надеюсь, что помогает.

Answer 2

Процесс AJAX запускается при запуске метода $.ajax(), и он останавливается, когда «полный» обратный вызов выполняется. Итак, начните обработку изображений/уведомлений прямо перед строкой $.ajax() и завершите ее в «полном» обратном вызове.

и ajaxStop обработчики могут быть добавлены к любым элементам и будут вызываться всякий раз, когда запускаются или останавливаются запросы ajax (если есть параллельные экземпляры, запуск запускается только при первом вызове, останавливается на последнем, чтобы идти). Таким образом, это просто другой способ сделать глобальное уведомление, если у вас есть, например, строка состояния где-то на странице, которая представляет любую деятельность.

Answer 3

Лучший метод, который я нашел, предполагая, что вы заполняете настоящее, но пустое поле должно иметь класс .loading, определенный с помощью background-image: url('images/loading.gif') в вашем CSS. Затем вы можете добавить и удалить класс загрузки, если необходимо, с помощью jQuery.

Answer 4

$(function() { 
     $('.error').hide(); 
     $("#checkin-button").click(function() { 
       var mid = $("input#mid").val(); 
       var message = $("textarea#message").val(); 
       var facebook = $('input#facebook').is(':checked'); 
       var name = $("input#name").val(); 
       var bgg_id = $("input#bgg-id").val(); 
       var thumbnail = $("input#thumbnail").val(); 
       var dataString = 'mid=' + mid + '&message=' + message + '&facebook=' + facebook + '&name=' + name + '&bgg_id=' + bgg_id + '&thumbnail=' + thumbnail; 
       $.ajax({ 
         type : "POST", 
         url : "/game-checkin", 
         data : dataString, 
         beforeSend : function() { 
         $('#preloader').addClass('active'); 
         }, 
         success : function(badges) { 
          $('#preloader').removeClass('active'); 
          $('#checkin-form').html("<div id='message'></div><div id='badges'></div>"); 
          $('#message').html("<h2><img class=\"check-mark\" src=\"/static/images/check-mark.png\"/>You are checked in!</h2>"); 
          $.each(badges, function(i, badge) { 
            $('#badges').append("<h2>New Badge!</h2><p><img class='badge' src='" + badge.image_url + "'><span class='badge-title'>" + badge.name + "</span></p>"); 
           }); 
         }, 
         complete : function() { 
          $('#preloader').removeClass('active');      
         } 
        }); 
       return false; 
      }); 
    }); 

---

#preloader{ 
background: url(staticpreloader.gif); 
} 
.active { 
background: url(activepreloader.gif); 
} 

Answer 5

Я написал blog post о том, как сделать это на родовом уровне документа.

// prepare the form when the DOM is ready 
$(document).ready(function() { 

    // Setup the ajax indicator 
    $('body').append('<div id="ajaxBusy"><p><img src="images/loading.gif"></p></div>'); 

    $('#ajaxBusy').css({ 
    display:"none", 
    margin:"0px", 
    paddingLeft:"0px", 
    paddingRight:"0px", 
    paddingTop:"0px", 
    paddingBottom:"0px", 
    position:"absolute", 
    right:"3px", 
    top:"3px", 
    width:"auto" 
    }); 
}); 

// Ajax activity indicator bound to ajax start/stop document events 
$(document).ajaxStart(function(){ 
    $('#ajaxBusy').show(); 
}).ajaxStop(function(){ 
    $('#ajaxBusy').hide(); 
}); 

Answer 6

Если вы используете JQuery 1.5 вы могли бы сделать это красиво, ненавязчиво и в общем с prefilter.Давайте сделаем очень простой плагин для этого:

(function($) { 

    var animations = {}; 

    $.ajaxPrefilter(function(options, _, jqXHR) { 
     var animation = options.animation && animations[ options.animation ]; 
     if (animation) { 
      animation.start(); 
      jqXHR.then(animation.stop, animation.stop); 
     } 
    }); 

    $.ajaxAnimation = function(name, object) { 
     if (object) { 
      loadingAnimations[ name ] = object; 
     } 
     return loadingAnimations[ name ]; 
    }; 

})(jQuery); 

Вы установить анимацию следующим образом:

jQuery.ajaxAnimation("spinner" , { 
    start: function() { 
     // code that starts the animation 
    } 
    stop: function() { 
     // code that stops the animation 
    } 
}); 

Затем, необходимо указать анимацию в ваших АЯКС опций:

jQuery.ajax({ 
    type: "POST", 
    url: "/game-checkin", 
    data: dataString, 
    animation: "spinner", 
    success: function() { 
     // your success code here 
    } 
}); 

и тому prefilter гарантирует, что анимация «spinner» будет запущена и остановлена ​​при необходимости.

Конечно, вы можете установить альтернативные анимации и выбрать тот, который вам нужен для каждого запроса. Вы даже можете установить анимацию по умолчанию для всех запросов с использованием ajaxSetup:

jQuery.ajaxSetup({ 
    animation: "spinner" 
}); 

Answer 7

вы можете установить глобальный обработчик Ajax загрузки значок с помощью здесь #ajxLoader занимает ваш значок загрузки

$(document).ajaxStart(function() { 
     $("#ajxLoader").fadeIn(); 
    }); 

    $(document).ajaxComplete(function() { 
     $("#ajxLoader").fadeOut(); 
    });