如何在ajax请求期间显示处理动画/微调器？

我的AJAX POST正在处理时，我想要一个基本的微调器或处理动画。 我正在使用JQuery和Python。 我查看了文档，但无法弄清楚ajaxStart和ajaxStop函数的确切位置。

这是我的js：

 $(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("
"); $('#message').html("
You are checked in!
"); $.each(badges, function(i,badge) { $('#badges').append("
New Badge!
"+badge.name+"
"); }); } }); return false; }); });  

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("
"); $('#message').html("
You are checked in!
"); $.each(badges, function(i,badge) { $('#badges').append("
New Badge!
"+badge.name+"
"); }); 

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

以下是$ .ajax（）提供的回调挂钩：

调用beforeSend回调; 它接收jqXHR对象和设置映射作为参数。 如果请求失败，则按照注册顺序调用错误回调。 它们接收jqXHR，一个指示错误类型的字符串，以及一个exception对象（如果适用）。 一些内置错误将提供一个字符串作为exception对象：“abort”，“timeout”，“No Transport”。 成功接收响应数据后立即调用dataFilter回调。 它接收返回的数据和dataType的值，并且必须返回（可能已更改的）数据以传递给成功。 然后，如果请求成功，则按照注册顺序调用成功回调。 它们接收返回的数据，包含成功代码的字符串和jqXHR对象。 完成回调在请求完成时按其注册顺序触发，无论是失败还是成功。 它们接收jqXHR对象，以及包含成功或错误代码的字符串。

请注意代码的beforeSend和complete方法添加。

希望有所帮助。

Answer 2

如果你正在使用jQuery 1.5，你可以很好地，不引人注意地和一般地使用预filter 。 让我们为此制作一个非常简单的插件：

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

然后，在ajax选项中指定动画：

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

并且预滤波器将确保在需要时启动和停止“微调器”动画。

当然，通过这种方式，您可以安装其他动画并选择每个请求所需的动画。 您甚至可以使用ajaxSetup为所有请求设置默认动画：

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

Answer 3

我发现的最好的方法，假设你填充一个现在但空的字段是在你的CSS中使用background-image: url('https://stackoverflow.com/questions/4901537/how-to-show-processing-animation-spinner-during-ajax-request/images/loading.gif')定义.loading类。 然后，您可以根据需要使用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("
"); $('#message').html("
You are checked in!
"); $.each(badges, function(i, badge) { $('#badges').append("
New Badge!
" + badge.name + "
"); }); }, complete : function() { $('#preloader').removeClass('active'); } }); return false; }); }); 

---

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

Answer 5

我写了一篇关于如何在通用文档级别上执行此操作的博客文章 。

 // prepare the form when the DOM is ready $(document).ready(function() { // Setup the ajax indicator $('body').append('
'); $('#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

运行$.ajax()方法时AJAX进程启动，并在运行’complete’回调时停止。 因此，在$.ajax()行之前开始处理图像/通知，并在“完整”回调中结束它。

ajaxStart和ajaxStop处理程序可以添加到任何元素，并且只要ajax请求启动或停止就会被调用（如果有并发实例，则只在第一个实例上调用start，在最后一个实例上调用start）。 因此，如果你在页面的某个地方有一个表示任何和所有活动的状态微调器，那么这只是一种不同的全局通知方式。

Answer 7

你可以在这里设置全局ajax加载图标处理程序#ajxLoader带你的加载图标

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