Вызов функции до тех пор, пока jQuery .post не закончит загрузку

Question

Я немного новичок в структуре jQuery и, используя AJAX с обычным javascript, использовал функцию readyState(), чтобы отобразить загрузочное изображение gif. Но я не знаю, как использовать это в методе jQuery .post(). Можно ли добавить класс, пока он не завершит загрузку? Если да, пожалуйста, дайте образец кода. Моя функция похожа на это:

$.post("verify.php",{ 
username: u, 
password: p 
},function(r) { 
    if(r == 1) { 
    $(".elmt").addClass("loading"); 
    } else if (r == 0) { 
    location.href = 'http://localhost'; 
    } 
}); 

Answer 1

Я всегда предпочитаю использовать $.ajax для таких вещей, как это имеет больше возможностей, чем ярлыки:

$.ajax({ 
    type: 'POST', 
    url : 'verify.php', 
    data: { 
      username: u, 
      password: p 
    }, 
    beforeSend: function() { 
     $(".elmt").addClass("loading"); // add loader 
    } 
}).always(function() { // always executed 

    $(".elmt").removeClass("loading"); // remove loader 

}).done(function(r) { // executed only if successful 
    if (r == 0) { 
     location.href = '/'; 
    } 
}); 

Answer 2

Просто вызовите addClass перед $.post() и сделать с ней

$(".elmt").addClass("loading"); 
$.post("verify.php", { 
    username: u, 
    password: p 
}, function (r) { 
    location.href = 'http://localhost'; 
}); 

Answer 3

Существует глобальный способ сделать это с помощью ajaxStart() и ajaxStop(). См. How to show loading spinner in jQuery?

Answer 4

Перед запуском вашего запроса AJAX вы можете запустить специальное событие. Затем в вашей функции успеха запустите еще одну остановку.

Или если вы просто хотите загрузочную анимацию:

$(".elmt").addClass("loading"); 

$.post("verify.php",{ 
username: u, 
password: p 
},function(r) {  
    $(".elmt").removeClass("loading"); 
    // etc... 
}); 

Answer 5

Если вам нужно сделать для всех ваших запросов. Вы можете попробовать:

$(document).ajaxStart(function(){ 
    $(".elmt").addClass("loading"); 
}); 

$(document).ajaxStop(function(){ 
    $(".elmt").removeClass("loading"); 
}); 

Но это не так здорово, чтобы всегда отображать загрузку, когда запрос занимает мало времени, поскольку это приведет к тому, экран щелкать. Попробуйте:

var timer; 
$(document).ajaxStart(function(){ 
     timer = setTimeout(function(){ 
      $(".elmt").addClass("loading"); 
     },1500); 
    }); 

    $(document).ajaxStop(function(){ 
     clearTimeout(timer); 
     $(".elmt").removeClass("loading"); 
    }); 

Добавляя таймер, только запросы, которые занимают больше времени, чем на 1,5 секунды следует рассматривать долго и отображение значка загрузки.

Answer 6

Как вы видите на коду ниже вы можете сделать свою работу по различным результатам методы поста

// Assign handlers immediately after making the request, 
// and remember the jqxhr object for this request 
var jqxhr = $.post("example.php", function() { 
alert("success"); 
}) 
.done(function() { alert("second success"); }) 
.fail(function() { alert("error"); }) 
.always(function() { alert("finished"); }); 
// perform other work here ... 
// Set another completion function for the request above 
jqxhr.always(function(){ alert("second finished"); });