Comment montrer le traitement de l'animation / spinner lors de la demande ajax?

 $.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 crochets de rappel fournis par $ .ajax ():

BeforeSend callback is invoked; Il reçoit l'objet jqXHR et la carte des paramètres en tant que paramètres. Les retours d'erreur sont invoqués, dans l'ordre où 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 s'il y a lieu. Certaines erreurs intégrées fournissent une chaîne comme objet d'exception: "annuler", "timeout", "No Transport". Le renvoi de DataFilter est invoqué immédiatement après réception des données de réponse. Il reçoit les données retournées et la valeur de dataType, et doit renvoyer les données (éventuellement modifiées) pour réussir. Les retours de succès sont alors invoqués, dans l'ordre où ils sont enregistrés, si la demande réussit. Ils reçoivent les données renvoyées, une chaîne contenant le code de réussite et l'objet jqXHR. Tous les appels de rappel déclenchent, dans l'ordre où ils sont enregistrés, lorsque la demande se termine, en cas d'échec ou de succès. Ils reçoivent l'objet jqXHR, ainsi qu'une chaîne contenant le code de réussite ou d'erreur.

Notez les ajouts de la méthode beforeSend et complétez le code.

J'espère que cela pourra aider.

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

 (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 assurera que l'animation "spinner" est démarrée et arrêtée si nécessaire.

Bien sûr, de cette façon, vous pouvez avoir d'autres animations installées et sélectionner celle dont vous avez besoin par demande. Vous pouvez même définir une animation par défaut pour toutes les requêtes en utilisant ajaxSetup:

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

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

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

J'ai écrit un article de blog sur la façon de le faire sur un niveau de 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(); }); 

Le processus AJAX démarre lorsque vous exécutez la $.ajax() , et il s'arrête lorsque le rappel "complet" est exécuté. Donc, commencez votre image de traitement / notification avant la ligne $.ajax() , et $.ajax() le dans le rappel "complet".

ajaxStart et ajaxStop peuvent être ajoutés à tous les éléments et seront appelés chaque fois que les requêtes ajax commenceront ou s'arrêteront (s'il y a des instances simultanées, le démarrage ne nécessite que le premier, arrêtez-vous sur le dernier aller). Donc, ce n'est qu'une manière différente de faire une notification globale si vous aviez, par exemple, un fil de l'état quelque part sur la page qui représente toutes et toutes les activités.

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

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