我需要一个基本的微调器或处理动画，而我的AJAX POST正在处理中。我正在使用JQuery和Python。我查看了文档，但无法弄清楚ajaxStart和ajaxStop函数的确切位置。
这是我的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>
答案 0 :(得分：25)
$.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对象，以及包含成功或错误代码的字符串。
请注意代码的beforeSend和complete方法添加。
希望有所帮助。
答案 1 :(得分：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
}
} );
然后，在ajax选项中指定动画：
jQuery.ajax({
type: "POST",
url: "/game-checkin",
data: dataString,
animation: "spinner",
success: function() {
// your success code here
}
});
并且预过滤器将确保在需要时启动和停止“微调器”动画。
当然，通过这种方式，您可以安装其他动画并选择每个请求所需的动画。您甚至可以使用ajaxSetup为所有请求设置默认动画：
jQuery.ajaxSetup({
animation: "spinner"
});
答案 2 :(得分：3)
我发现的最佳方法，假设您正在填充当前但空字段，则在CSS中使用.loading定义background-image: url('images/loading.gif')类。然后，您可以根据需要使用jQuery添加和删除加载类。
答案 3 :(得分：2)
AJAX进程在运行$.ajax()方法时启动，并在运行“完成”回调时停止。因此，请在$.ajax()行之前开始处理图像/通知，并在“完整”回调中结束。
ajaxStart和ajaxStop处理程序可以添加到任何元素中，并且只要ajax请求启动或停止就会被调用（如果有并发实例，则只在第一个上调用start，停止在最后去）。因此，如果你在页面的某个地方有一个代表任何和所有活动的状态微调器，那么这只是一种不同的全局通知方式。
答案 4 :(得分：2)
$(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);
}
答案 5 :(得分：2)
我写了一篇关于如何在通用文档级别上执行此操作的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();
});
答案 6 :(得分：2)
你可以在这里设置全局ajax加载图标处理程序#ajxLoader带你的加载图标
$( document ).ajaxStart(function() {
$("#ajxLoader").fadeIn();
});
$( document ).ajaxComplete(function() {
$("#ajxLoader").fadeOut();
});