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>

ベストアンサー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>");
    })
  }
});

参考::

$.ajax() によって提供されるコールバック フックは次のとおりです。

beforeSend コールバックが呼び出されます。このコールバックは、jqXHR オブジェクトと設定マップをパラメータとして受け取ります。リクエストが失敗すると、登録されている順序で error コールバックが呼び出されます。これらのコールバックは、jqXHR、エラーの種類を示す文字列、および該当する場合は例外オブジェクトを受け取ります。一部の組み込みエラーは、例外オブジェクトとして文字列を提供します: "abort"、"timeout"、"No Transport"。dataFilter コールバックは、応答データの受信に成功するとすぐに呼び出されます。返されたデータと dataType の値を受け取り、success に渡す (変更されている可能性のある) データを返す必要があります。リクエストが成功すると、登録されている順序で success コールバックが呼び出されます。これらのコールバックは、返されたデータ、成功コードを含む文字列、および jqXHR オブジェクトを受け取ります。complete コールバックは、リクエストが失敗または成功のいずれであっても終了すると、登録されている順序で実行されます。これらのコールバックは、jqXHR オブジェクトと、成功またはエラー コードを含む文字列を受け取ります。

beforeSendコードへのメソッドの追加と完了に注意してください。

お役に立てれば幸いです。

おすすめ記事