50

我在网站的文档上有一些 ajax 调用，根据 ajax 状态显示或隐藏进度条

  $(document).ajaxStart(function(){ 
        $('#ajaxProgress').show(); 
    });
  $(document).ajaxStop(function(){ 
        $('#ajaxProgress').hide(); 
    });

我想基本上在站点的其他部分重写这些方法，在这些部分进行了很多快速的小型 ajax 调用，并且不需要进度条进出。我正在尝试将它们附加到或插入到其他 $.getJSON 和 $.ajax 调用中。我曾尝试将它们链接起来，但显然这并不好。

$.getJSON().ajaxStart(function(){ 'kill preloader'});
4

10 回答 10

40

2018 注意：此答案已过时；随时建议对此答案进行编辑，这将起作用。

您可以使用自定义命名空间绑定 ajaxStart 和 ajaxStop：

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

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

然后，在站点的其他部分，您将在.json 调用之前暂时解除它们的绑定：

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

在寻找答案时从这里得到了这个想法。

编辑：唉，我还没来得及测试它。

于 2009-07-31T14:06:14.677 回答
25

选项对象 .ajax() 中有一个名为global的属性。

如果设置为false，则不会触发调用的ajaxStart事件。

    $.ajax({
        url: "google.com",
        type: "GET",
        dataType: "json",
        cache: false,
        global: false, 
        success: function (data) {
于 2017-07-15T14:37:08.640 回答
15

如果你把它放在处理 ajax 动作的函数中，它只会在适当的时候绑定自己：

$('#yourDiv')
    .ajaxStart(function(){
        $("ResultsDiv").hide();
        $(this).show();
    })
    .ajaxStop(function(){
        $(this).hide();
        $(this).unbind("ajaxStart");
    });
于 2010-12-02T19:05:57.700 回答
11

使用本地范围的 Ajax 事件

                success: function (jQxhr, errorCode, errorThrown) {
                    alert("Error : " + errorThrown);
                },
                beforeSend: function () {
                    $("#loading-image").show();
                },
                complete: function () {
                    $("#loading-image").hide();
                }
于 2017-02-09T01:32:06.867 回答
7

此外，如果您想禁用.ajaxStart()对and的调用，您可以在请求.ajaxStop()中设置global选项;)false.ajax()

在此处查看更多信息：如何在特定的 ajax 调用中调用 .ajaxStart()

于 2012-12-19T14:05:50.043 回答
4

不幸的是，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);
    }
 );
于 2009-07-28T01:46:12.340 回答
2

我有一个解决方案。我设置了一个名为 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;
});
于 2014-03-21T04:14:25.450 回答
2

像这样在 ajax 调用中使用 beforeSend 或完成回调函数.....现场示例在这里 https://stackoverflow.com/a/34940340/5361795

源呐喊代码

于 2016-01-22T06:32:39.450 回答
0

如果您想在决定做什么之前检查请求，请使用 ajaxSend 和 ajaxComplete。在这里查看我的回复：https ://stackoverflow.com/a/15763341/117268

于 2013-04-02T11:53:53.633 回答
0 
<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 请求时，将显示日志消息。

于 2013-07-11T11:37:49.463 回答