web-dev-qa-db-fra.com

Comment afficher l'animation de traitement / spinner lors d'une demande ajax?

Je veux un spinner de base ou une animation de traitement pendant que mon AJAX POST est en cours de traitement. J'utilise JQuery et Python. J'ai regardé la documentation mais je ne peux pas savoir exactement où placer les fonctions ajaxStart et ajaxStop.

Voici mon 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>
javascriptjqueryajaxdjangospinner
20
Will Curran
$.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/ :

Voici les hooks de rappel fournis par $ .ajax ():

le rappel beforeSend est invoqué; il reçoit l'objet jqXHR et le mappage des paramètres en tant que paramètres. les rappels d'erreur sont invoqués, dans l'ordre dans lequel ils sont enregistrés, si la demande échoue. Ils reçoivent le jqXHR, une chaîne indiquant le type d'erreur et un objet d'exception le cas échéant. Certaines erreurs intégrées fourniront une chaîne comme objet d'exception: "abandonner", "délai d'attente", "Aucun transport". Le rappel dataFilter est appelé immédiatement après la réception réussie des données de réponse. Il reçoit les données renvoyées et la valeur de dataType, et doit renvoyer les données (éventuellement modifiées) pour passer au succès. les rappels de réussite sont ensuite appelés, dans l'ordre dans lequel ils sont enregistrés, si la demande aboutit. Ils reçoivent les données renvoyées, une chaîne contenant le code de réussite et l'objet jqXHR. les rappels complets se déclenchent, dans l'ordre où ils sont enregistrés, à la fin de la demande, que ce soit en échec ou en succès. Ils reçoivent l'objet jqXHR, ainsi qu'une chaîne contenant le code de réussite ou d'erreur.

Notez les beforeSend et les ajouts de méthode complets au code.

J'espère que cela pourra aider.

25
Mandrake

Si vous utilisez jQuery 1.5, vous pouvez le faire de manière agréable, discrète et générique avec un préfiltre . Faisons un plugin très simple pour cela:

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

Vous installez une animation comme suit:

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

ensuite, vous spécifiez l'animation dans vos options ajax:

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

et le préfiltre garantira que l'animation "spinner" est démarrée et arrêtée en cas de besoin.

Bien sûr, de cette façon, vous pouvez installer des animations alternatives et sélectionner celle dont vous avez besoin par demande. Vous pouvez même définir une animation par défaut pour toutes les demandes en utilisant ajaxSetup:

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

La meilleure méthode que j'ai trouvée, en supposant que vous remplissez un champ présent mais vide, est d'avoir une classe .loading Définie avec background-image: url('images/loading.gif') dans votre CSS. Vous pouvez ensuite ajouter et supprimer la classe de chargement si nécessaire avec jQuery.

3
Chris Sobolewski
$(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);
}
2
Idered

J'ai écrit un article de blog sur la façon de le faire au niveau d'un document générique.

// 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();
});
2
SKFox

Le processus AJAX démarre lorsque vous exécutez la méthode $.ajax(), et il s'arrête lorsque le rappel "complet" est exécuté. Par conséquent, démarrez votre imagerie/notification de traitement juste avant le $.ajax() line, et terminez-la par le rappel 'complete'.

Les gestionnaires ajaxStart et ajaxStop peuvent être ajoutés à tous les éléments et seront appelés chaque fois que des requêtes ajax démarrent ou s'arrêtent (s'il y a des instances simultanées, start n'est appelé que sur la première, stop sur la dernier aller). Donc, c'est juste une façon différente de faire une notification globale si vous aviez, par exemple, un spinner d'état quelque part sur la page qui représente toutes les activités.

2
Craig

vous pouvez définir le gestionnaire d'icônes de chargement ajax global en utilisant ici #ajxLoader prend votre icône de chargement

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

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