web-dev-qa-db-ja.com

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>
javascriptjqueryajaxdjangospinner
20
Will Curran
$.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および完全なメソッドの追加に注意してください。

お役に立てば幸いです。

25
Mandrake

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"
});
6
Julian Aubourg

あなたが現在の空のフィールドにデータを入力していると仮定して、私が見つけた最良の方法は、CSSでbackground-image: url('images/loading.gif')を使用して.loadingクラスを定義することです。次に、jQueryを使用して、必要に応じて読み込みクラスを追加および削除できます。

3
Chris Sobolewski
$(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);
}
2
Idered

一般的なドキュメントレベルでこれを行う方法について ブログ投稿 を書きました。

// 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();
});
2
SKFox

AJAXプロセスは、$.ajax()メソッドを実行すると開始され、 'complete'コールバックが実行されると停止します。したがって、$.ajax()行で、 'complete'コールバックで終了します。

ajaxStartおよびajaxStopハンドラーは任意の要素に追加でき、ajaxリクエストが開始または停止するたびに呼び出されます（同時インスタンスがある場合、最初のインスタンスでのみ開始が呼び出され、最後に）。したがって、たとえば、ページ上のどこかにありとあらゆるアクティビティを表すステータススピナーがある場合、それはグローバル通知を行う別の方法です。

2
Craig

ここを使用してグローバルajaxロードアイコンハンドラーを設定できます#ajxLoaderはロードアイコンを受け取ります

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

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