如何在特定的Ajax调用上调用.ajaxstart()。

2018注: 此答案已过时;请随意建议对此答案进行编辑。

可以使用自定义命名空间绑定AjaxStart和AjaxStop:

$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});

$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});

然后,在站点的其他部分,您将临时解除绑定 之前 您的.json调用:

$(document).unbind(".mine");

这个主意是从 here 在寻找答案时。

编辑: 唉,我没有时间来测试它。

如果您将它放在处理Ajax操作的函数中,它只会在适当的时候绑定自身:

$('#yourDiv')
    .ajaxStart(function(){
        $("ResultsDiv").hide();
        $(this).show();
    })
    .ajaxStop(function(){
        $(this).hide();
        $(this).unbind("ajaxStart");
    });

选项对象中有一个属性。Ajax()接受调用 全球的 .

如果设置为 假 ,它不会触发 AJAXSTART 呼叫的事件。

    $.ajax({
        url: "google.com",
        type: "GET",
        dataType: "json",
        cache: false,
        global: false, 
        success: function (data) {

使用本地范围的Ajax事件

                success: function (jQxhr, errorCode, errorThrown) {
                    alert("Error : " + errorThrown);
                },
                beforeSend: function () {
                    $("#loading-image").show();
                },
                complete: function () {
                    $("#loading-image").hide();
                }

此外,如果你想 使残废 呼吁 .ajaxStart() 和 .ajaxStop() ,你可以设定 global 选择权 false 在你 .ajax() 请求;

在这里看到更多: How to call .ajaxStart() on specific ajax calls

不幸的是,AjaxStart事件没有任何附加信息,您可以使用这些信息来决定是否显示动画。

不管怎样,这里有一个主意。在AjaxStart方法中,为什么不在200毫秒后启动动画?如果Ajax请求在200毫秒内完成,则不会显示任何动画,否则将显示动画。代码可能看起来像:

var animationController = function animationController()
{
    var timeout = null;
    var delayBy = 200; //Number of milliseconds to wait before ajax animation starts.

    var pub = {};

    var actualAnimationStart = function actualAnimationStart()
    {
        $('#ajaxProgress').show();
    };

    var actualAnimationStop = function actualAnimationStop()
    {
        $('#ajaxProgress').hide();
    };

    pub.startAnimation = function animationController$startAnimation() 
    { 
        timeout = setTimeout(actualAnimationStart, delayBy);
    };

    pub.stopAnimation = function animationController$stopAnimation()
    {
        //If ajax call finishes before the timeout occurs, we wouldn't have 
        //shown any animation.
        clearTimeout(timeout);
        actualAnimationStop();
    }

    return pub;
}();


$(document).ready(
    function()
    {
        $(document).ajaxStart(animationController.startAnimation);
        $(document).ajaxStop(animationController.stopAnimation);
    }
 );

在Ajax调用中使用beforesend或complete回调函数,如下所示….. 这里是现场示例 https://stackoverflow.com/a/34940340/5361795

来源 ShoutingCode

我有一个解决办法。 我设置了一个名为showloader的全局JS变量(默认设置为false)。在任何要显示加载程序的函数中,只需在进行Ajax调用之前将其设置为true。

function doAjaxThing()
{
    showloader=true;
    $.ajax({yaddayadda});
}

然后在我的头部分有以下内容:

$(document).ajaxStart(function()
{
    if (showloader)
    {
        $('.loadingholder').fadeIn(200);
    }
});    

$(document).ajaxComplete(function() 
{
    $('.loadingholder').fadeOut(200);
    showloader=false;
});

如果要在决定要做什么之前对请求进行交叉检查,请使用AjaxSend和AjaxComplete。请看我的回复: https://stackoverflow.com/a/15763341/117268

<div class="Local">Trigger</div>

<div class="result"></div>
<div class="log"></div>

$(document).ajaxStart(function() {
$( "log" )text( "Trigger Fire successfully." );
});

$( ".local" ).click(function() {
$( ".result" ).load("c:/refresh.html.");
});

通过这个例子,你会了解到一些情况,当用户单击带有类local的元素并发送Ajax请求时,会显示日志消息。