Làm thế nào để biết nếu có bất kỳ yêu cầu Ajax và ajax Success

Question

Tôi tự hỏi làm thế nào tôi có thể mã này

Lưu ý: tôi không đi để mã nó một lần nữa và một lần nữa trong mỗi chức năng yêu cầu ajax của tôi . tôi muốn nó. để kịch bản của tôi biết nếu có bất kỳ yêu cầu ajax làm $("#loader").css("display","block"); và nếu có bất kỳ sự thành công ajax làm $("#loader").css("display","none");

Answer 1

Điều kỳ diệu bạn đang tìm kiếm là jQuery.ajaxStart() và jQuery.ajaxStop(). Bạn cũng có thể tìm thấy jQuery.ajaxComplete() hữu ích.

Ví dụ:

$("#loader").ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).hide(); 
}); 

Bạn nên sử dụng phương pháp hide() và show() thay vì thay đổi các thuộc tính display CSS.

Answer 2

Hãy xem $.ajaxStart và $.ajaxEnd khi bạn dây lên ứng dụng của bạn trong $ .document (sẵn sàng):

$.ajaxStart(function(){ 
    $("#loader").css("display", "block"); 
}) 
.ajaxStop(function(){ 
    $("#loader").css("display", "none"); 
}); 

CẬP NHẬT quên về ajaxStop ... @ câu trả lời Cory s nhắc nhở tôi. Đã cập nhật câu trả lời của tôi.

Answer 3

Nếu bạn bắn ra hai hoặc ba cuộc gọi ajax, ajaxStop sẽ chỉ bắn khi người cuối cùng được thực hiện.

var isMakingAjaxCall; 

$(document).ready(function() { 

    // Loading Screen for Ajax Calls 
    $("#loader").hide(); 
    $("#loader").ajaxStart(function() { 
     isMakingAjaxCall = true; 
     RepositionLoading(); 
     $("#loader").fadeIn(); 
    }); 
    $("#loader").ajaxStop(function() { 
     $("#loader").fadeOut(); 
     isMakingAjaxCall = false; 
    }); 
}); 

function RepositionLoading() { 
    $("#loader").css('left', "20px"); 
    $("#loader").css('top', "20px"); 
}; 

Answer 4

Những giải pháp khác là tuyệt vời nhưng tôi không chắc là họ giải quyết mối quan tâm của bạn gọi $("#loader") của bạn thay đổi CSS trên bắt đầu và thành công.

Có thể là một cái gì đó như thế này:

$(document).ajaxStart(function() { 

    // do something on start 
    $("#loader").css("display","block"); 

}).ajaxError(function(e, xhr, settings) { 
    // do something on error 
    $("#loader").css("display","none"); 

}).ajaxSuccess(function() { 

    // do something on success 
    $("#loader").css("display","block"); 

}); 

Check-out này ví dụ làm việc đúng cách: http://jsbin.com/ocovoq/3/edit#preview