如何显示Ajax请求过程中处理动画/微调？ [英] How to show processing animation / spinner during ajax request?

问题描述

我想一个基本的微调或处理动画，而我的AJAX POST正在处理。我使用jQuery和Python。我看了看文档，但无法弄清楚到底放在哪里ajaxStart和ajaxStop功能。

下面是我的JS：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
      $（函数（）{
        $（'错误'）隐藏（）。
        $（＃签入按钮）。点击（函数（）{
          。VAR中期= $（＃输入年年）VAL（）;
          VAR消息= $（＃textarea的消息）VAL（）。
          。VAR的Facebook = $（'＃输入实）是（：选中）;
          变种名称= $（＃输入名称）VAL（）。
          VAR bgg_id = $（＃输入BGG-ID）VAL（）。
          。VAR缩略图= $（＃输入缩略图）VAL（）;
          VAR dataString = 'mid='+mid+'&message='+message+'&facebook='+facebook+'&name='+name+'&bgg_id='+bgg_id+'&thumbnail='+thumbnail;
          $阿贾克斯（{
            键入：POST，
            网址：/游戏签，
            数据：dataString，
            成功：函数（徽章）{
            $（'＃签形式）HTML（＆LT; D​​IV ID ='消息'＆GT;＆LT; / DIV＆GT;＆LT; D​​IV ID ='徽章'＆GT;＆LT; / DIV＆gt;中）;
            $（'＃信息）HTML（＆LT; H2＆GT;＆LT; IMG类= \复选标记\SRC = \/静态/图片/签mark.png \/＆gt;您在检查！＆所述; / H 2＆gt;中）;
            $每个（徽章，功能（我，徽章）{
              $（'＃证）追加（＆LT; H2＆gt;新建徽章＆LT;！/ H＆GT;＆LT; P＆GT;＆LT; IMG类='徽章'SRC ='+ badge.image_url +'＆GT;＆LT;跨度类='徽章，称号＆gt;中+ badge.name +＆LT; / SPAN＆GT;＆LT; / P＆gt;中）;
            }）;
          }
       }）;
       返回false;
     }）;
    }）;
  ＆LT; / SCRIPT＆GT;
 

解决方案

 
$阿贾克斯（{
            类型：＆QUOT; POST＆QUOT;，
            网址：＆QUOT; /游戏签＆QUOT;，
            数据：dataString，
            beforeSend：函数（）{
                ...您的初始code在这里（所以显示加载器）...
            }，
            完成：函数（）{
                ...您的定稿code在这里（隐藏加载器）...
            }，
            成功：函数（徽章）{
            $（'＃签形式）HTML（＆QUOT;＆LT; D​​IV ID ='消息'＆GT;＆LT; / DIV＆GT;＆LT; D​​IV ID ='徽章'＆GT;＆LT; / DIV＆GT;＆QUOT;）;
            $（'＃信息）HTML（＆QUOT;＆LT; H2＆GT;＆LT; IMG类= \＆QUOT;检查标记\＆QUOT; SRC = \＆QUOT; /static/images/check-mark.png \＆QUOT; /＆GT ;您检查与＆lt;！/ H＆GT;＆QUOT;）;
            $每个（徽章，功能（我，徽章）{
              $（'＃证）添加（＆QUOT;＆LT; H2＆gt;新建徽章＆LT;！/ H＆GT;＆LT; P＆GT;＆LT; IMG类='徽章'SRC ='＆QUOT; + badge.image_url + QUOT;'＆GT ;＆LT;'徽章，称号＆GT跨度类=;＆QUOT; + badge.name + QUOT;＆LT; / SPAN＆GT;＆LT; / P＆GT;＆QUOT;）;
}）;
 

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

  

下面是由$。阿贾克斯（）提供的回调挂钩：

     

beforeSend回调函数;它接收到的jqXHR对象和设置映射作为参数。   错误回调被调用的顺序，他们被注册，如果该请求失败。他们收到jqXHR，一个字符串，指示错误类型，以及一个异常对象（如果适用）。一些内置的错误会提供一个字符串作为异常对象：中止，暂停，无传输。   dataFilter回调立即调用成功接收响应数据时。它接收返回的数据和数据类型的值，必须返回（可能改变）的数据传递成功。   成功的回调，然后调用的顺序它们被注册，如果该请求成功。他们接收返回的数据，包含成功code字符串，以及jqXHR对象。   完整的回调火的顺序，他们注册，当请求完成后，无论是失败还是成功。他们收到的jqXHR对象，以及含有该成功或错误code进行串

请注意的beforeSend和完整的方法增加的code。

希望有所帮助。

I want a basic spinner or processing animation while my AJAX POST is processing. I'm using JQuery and Python. I looked at the documentation but can't figure out exactly where to put the ajaxStart and ajaxStop functions.

Here is my 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>

解决方案

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

Here are the callback hooks provided by $.ajax():

beforeSend callback is invoked; it receives the jqXHR object and the settings map as parameters. error callbacks are invoked, in the order they are registered, if the request fails. They receive the jqXHR, a string indicating the error type, and an exception object if applicable. Some built-in errors will provide a string as the exception object: "abort", "timeout", "No Transport". dataFilter callback is invoked immediately upon successful receipt of response data. It receives the returned data and the value of dataType, and must return the (possibly altered) data to pass on to success. success callbacks are then invoked, in the order they are registered, if the request succeeds. They receive the returned data, a string containing the success code, and the jqXHR object. complete callbacks fire, in the order they are registered, when the request finishes, whether in failure or success. They receive the jqXHR object, as well as a string containing the success or error code.

Note the beforeSend and complete method additions to the code.

Hope that helps.

这篇关于如何显示Ajax请求过程中处理动画/微调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！