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

小编典典

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

ajax

我正在处理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>

阅读 237

2020-07-26

共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，指示错误类型的字符串以及适用的异常对象。某些内置错误将提供一个字符串作为异常对象：“中止”，“超时”，“无传输”。成功接收到响应数据后，将立即调用dataFilter回调。它接收返回的数据和dataType的值，并且必须返回（可能已更改）数据才能成功。如果请求成功，则按照注册的顺序调用成功回调。他们接收返回的数据，包含成功代码的字符串以及jqXHR对象。完成回调，无论请求是成功还是失败，按照请求完成的顺序进行注册。它们接收jqXHR对象，以及包含成功或错误代码的字符串。

注意beforeSend代码中的和完整方法添加。

希望有帮助。

2020-07-26