javascript - 调用函数直到 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

只需调用addClass之前的$.post()并完成它

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

Answer 2

您可以在开始 AJAX 请求之前触发自定义事件。然后在你的成功函数中，触发另一个停止。

或者，如果您只想要加载动画：

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

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

Answer 3

我总是更喜欢使用$.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 4

有一种使用 ajaxStart() 和 ajaxStop() 的全局方法。请参阅如何在 jQuery 中显示加载微调器？

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

正如您在下面的代码中看到的，您可以对 post 方法的不同结果进行处理

// 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"); });