javascript - 显示 native jquery ajax 函数的进度

Question

问题是每当我使用 $.get、$.post 或 $.ajax 时，我找不到在服务器处理某些内容时触发回调的方法。我可以通过 beforeSubmit 方法使用 ajaxform 插件来完成此操作，但是使用前面提到的功能，我找不到方法来完成此操作。 $.ajax 有一个 beforeSend 方法，但根据文档，它所做的只是调用“修改 header 的回调”。我想要一个回调来执行一些操作，例如阻止页面、显示弹出窗口、显示动画 gif 等。

有没有办法显示服务器正在通过 $.ajax、$.get、$.post、$()load 处理请求？

提前致谢!

Answer 1

我已经在 another question 中向您展示过您如何使用 ajaxStart 来实现此目的。

在这里我将建议另一种方法来做到这一点

$('.be-delete').live('click', function(e) {
    e.preventDefault();
    var object =$(this);
    // if request hasn't finished after 250ms show spinner
    // if request is fast the timer is canceled in success/error
    var timer = setTimeout(function() {
        //I use append here (instead of html()) which doesn't destroy original content
        //now you only need to use CSS img.spinner { ... } to position the spinner correctly
        object.parent().append('<img class="spinner" src="media/images/jquery/spinner.gif"/>');
    }, 250);
    var url = object.attr('href');
    $.ajax({
        url : url,
        error : function(){
            clearTimeout(timer);
            object.find("img#spinner").remove();
            alert('An error has occurred, no updates were made');
        },
        success : function() {
            clearTimeout(timer);
            object.parent().fadeOut('slow', function(){object.parent().remove()});
        }
    });
});