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（）有一种全局方法可以做到这一点。见How to show loading spinner in 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"); });

调用函数直到jQuery .post完成加载

6 个答案: