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

Question

我的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>

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

以下是$ .ajax()提供的回调钩子:

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

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

希望有所帮助.

Answer 2

如果你正在使用jQuery 1.5,你可以很好地,不引人注意地和一般地使用预过滤器.让我们为此制作一个非常简单的插件:

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