¿Cómo se muestra la animación de procesamiento/ruleta durante la solicitud de ajax?

Question

Quiero un spinner básico o una animación de procesamiento mientras mi AJAX POST está procesando. Estoy usando JQuery y Python. Miré la documentación pero no puedo encontrar exactamente dónde poner las funciones ajaxStart y ajaxStop.

Aquí está mi JS:

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

Éstos son los ganchos de devolución de llamada proporcionados por $ .ajax():

beforeSend devolución de llamada se invoca; recibe el objeto jqXHR y el mapa de configuración como parámetros. se invocan devoluciones de error, en el orden en que se registran, si la solicitud falla. Reciben el jqXHR, una cadena que indica el tipo de error y un objeto de excepción, si corresponde. Algunos errores incorporados proporcionarán una cadena como objeto de excepción: "abortar", "tiempo de espera", "Sin transporte". La devolución de llamada de DataFilter se invoca inmediatamente después de recibir con éxito los datos de respuesta. Recibe los datos devueltos y el valor de dataType, y debe devolver los datos (posiblemente modificados) para pasar al éxito. se invocan devoluciones exitosas, en el orden en que se registran, si la solicitud tiene éxito. Reciben los datos devueltos, una cadena que contiene el código de éxito y el objeto jqXHR. se activan las devoluciones de llamadas completas, en el orden en que se registran, cuando finaliza la solicitud, ya sea en caso de error o éxito. Reciben el objeto jqXHR, así como una cadena que contiene el código de éxito o error.

Observe las adiciones al método beforeSend y complete al código.

Espero que ayude.

Answer 2

El proceso comienza AJAX cuando se ejecuta el método $.ajax(), y se detiene cuando se ejecuta la devolución de llamada 'completo'. Por lo tanto, inicie su procesamiento de imágenes/notificación justo antes de la línea $.ajax(), y termínelo en la devolución de llamada 'completa'.

ajaxStart y ajaxStop manipuladores se pueden agregar a cualquier elemento, y será llamado cada vez que las peticiones Ajax iniciar o detener (si hay instancias concurrentes, sólo comenzará obtiene la llamada en el primero, parar en el último en irse). Por lo tanto, es solo una forma diferente de hacer notificaciones globales si tuviera, por ejemplo, un control de estado en algún lugar de la página que represente cualquier actividad.

Answer 3

El mejor método que he encontrado, suponiendo que esté rellenando un campo presente pero vacío, es tener una clase .loading definida con background-image: url('images/loading.gif') en su CSS. A continuación, puede agregar y eliminar la clase de carga según sea necesario con 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

me escribió una blog post acerca de cómo hacer esto a nivel de documento genérico.

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

Si estás usando jQuery 1.5 se puede hacer eso muy bien, discretamente y de forma genérica con un prefilter.Vamos a hacer un plugin muy simple para esto:

(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); 

Instala una animación de la siguiente manera:

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

continuación, se especifica la animación en sus opciones ajax:

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

y la el prefiltro asegurará que la animación "spinner" se inicie y se detenga cuando sea necesario.

Por supuesto, de esa manera, que pueden estar instalados animaciones alternativas y seleccionar la que necesita por encargo. Incluso puede configurar una animación por defecto para todas las solicitudes usando ajaxSetup:

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

Answer 7

puede establecer manejador mundial ajax carga icono utilizando aquí #ajxLoader lleva el icono de carga

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

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