1

我对 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';
   }
});
4

6 回答 6

2

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

$(".elmt").addClass("loading");
$.post("verify.php", {
    username: u,
    password: p
}, function (r) {
    location.href = 'http://localhost';
});
于 2013-09-03T12:57:46.007 回答
2

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

或者,如果您只想要加载动画:

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

$.post("verify.php",{
username: u,
password: p
},function(r) {       
     $(".elmt").removeClass("loading");
     // etc...
});
于 2013-09-03T12:59:56.650 回答
2

我总是更喜欢使用$.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 = '/';
    }
});
于 2013-09-03T13:02:00.580 回答
1

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

于 2013-09-03T12:59:16.080 回答
0

如果您需要满足所有要求。你可以试试:

$(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 秒的请求才会被视为长请求并显示加载图标。

于 2013-09-03T13:02:00.467 回答
0

正如您在下面的代码中看到的,您可以对 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"); });
于 2013-09-03T13:04:23.590 回答