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コードへのメソッドの追加と完了に注意してください。
お役に立てれば幸いです。