如何在 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 进程在您运行 $.ajax() 方法时启动，并在运行“完成”回调时停止。因此，在 $.ajax() 行之前开始处理图像/通知，并在“完成”回调中结束。

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

Answer 2

我发现的最佳方法是，假设您正在填充一个存在但为空的字段，则在您的 CSS 中使用 background-image: url('images/loading.gif') 定义一个 .loading 类。然后，您可以根据需要使用 jQuery 添加和删除加载类。

Answer 3

$.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 并在代码中添加完整的方法。

希望对您有所帮助。

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

Answer 5

我写了一个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();
});

Answer 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 ) {
            animations[ name ] = object;
        }
        return animations[ 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 7

您可以使用此处设置全局 ajax 加载图标处理程序#ajxLoader 获取您的加载图标

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

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