Ajax 요청 중 처리 애니메이션/스피너를 표시하는 방법은 무엇입니까?
저는 AJAX POST가 진행되는 동안 기본 스피너나 처리 애니메이션을 원합니다.저는 JQuery와 Python을 사용하고 있습니다.설명서를 봤는데 agjaxStart 및 agjaxStop 기능을 어디에 두어야 할지 정확히 알 수 없습니다.
여기 제 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/ :
$.ajax()에서 제공하는 콜백 후크는 다음과 같습니다.
send callback이 호출되기 전에 jqXHR 개체와 설정 맵을 매개 변수로 수신합니다.요청이 실패할 경우 오류 콜백이 등록된 순서대로 호출됩니다.오류 유형을 나타내는 문자열인 jqXHR과 해당되는 경우 예외 개체를 수신합니다.일부 기본 제공 오류는 "abort", "timeout", "No Transport" 등의 예외 개체로 문자열을 제공합니다. dataFilter 콜백은 응답 데이터를 성공적으로 수신하는 즉시 호출됩니다.반환된 데이터와 dataType 값을 수신하며, 성공으로 전달하려면 변경된 데이터를 반환해야 합니다.그런 다음 요청이 성공하면 성공 콜백이 등록된 순서대로 호출됩니다.반환된 데이터, 성공 코드가 포함된 문자열 및 jqXHR 개체를 수신합니다.요청이 완료되면 실패 또는 성공 여부에 관계없이 등록된 순서대로 콜백을 실행합니다.성공 또는 오류 코드가 포함된 문자열과 함께 jqXHR 개체를 수신합니다.
참고:beforeSend코드에 대한 완전한 메서드 추가.
도움이 되길 바랍니다.
jQuery 1.5를 사용하는 경우 프리필터를 사용하여 눈에 띄지 않고 일반적으로 그렇게 할 수 있습니다.이를 위해 매우 간단한 플러그인을 만들어 보겠습니다.
(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 ) {
animations[ name ] = object;
}
return animations[ 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"
});
내가 찾은 가장 좋은 방법은 현재를 채우고 있지만 빈 필드를 채우는 것입니다..loading background-image: url('images/loading.gif')당신의 CSS에.그런 다음 jQuery를 사용하여 필요에 따라 로드 클래스를 추가 및 제거할 수 있습니다.
여기서 #ajxLoader를 사용하여 글로벌 Ajax 로딩 아이콘 처리기를 설정할 수 있습니다.
$( document ).ajaxStart(function() {
$("#ajxLoader").fadeIn();
});
$( document ).ajaxComplete(function() {
$("#ajxLoader").fadeOut();
});
$(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);
}
저는 일반 문서 수준에서 이를 수행하는 방법에 대한 블로그 게시물을 작성했습니다.
// 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();
});
는 AJAX를 할 때 됩니다.$.ajax()메서드는 '완료' 콜백이 실행되면 중지됩니다.이미지는 이알/림를바전시다 바로 $.ajax()행을 입력하고 '완료' 콜백으로 종료합니다.
ajaxStart그리고.ajaxStop핸들러는 모든 요소에 추가할 수 있으며, Ajax 요청이 시작되거나 중지될 때마다 호출됩니다(동시 인스턴스가 있는 경우 start는 첫 번째 요소에서만 호출되고 stop to go는 마지막 요소에서 중지됨).예를 들어 페이지 어딘가에 모든 활동을 나타내는 상태 스피너가 있으면 글로벌 알림을 수행하는 다른 방법일 뿐입니다.
언급URL : https://stackoverflow.com/questions/4901537/how-to-show-processing-animation-spinner-during-ajax-request
'programing' 카테고리의 다른 글
| Maria를 통한 높은 RAM 소비DB (0) | 2023.08.30 |
|---|---|
| Google Chrome에서 XMLHttpRequest를 사용하여 로컬 파일에서 URL을 로드하도록 허용 (0) | 2023.08.30 |
| 브라우저 뒤로 단추를 사용하여 다시 방문할 수 있도록 페이지 상태 유지 (0) | 2023.08.30 |
| PHPUunit를 사용하여 어레이에 값이 포함되어 있는지 테스트 (0) | 2023.08.30 |
| vba를 사용하여 텍스트 번역 (0) | 2023.08.30 |