jQuery 如何在特定的 ajax 调用中调用 .ajaxStart()

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1191485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 10:52:14  来源:igfitidea点击:

How to call .ajaxStart() on specific ajax calls

jqueryajaxprogress-barpreloader

提问by kevzettler

I have some ajax calls on the document of a site that display or hide a progress bar depending on the ajax status

我对站点的文档进行了一些 ajax 调用,根据 ajax 状态显示或隐藏进度条

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

I would like to basically overwirte these methods on other parts of the site where a lot of quick small ajax calls are made and do not need the progress bar popping in and out. I am trying to attach them to or insert them in other $.getJSON and $.ajax calls. I have tried chaining them but apparently that is no good.

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

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

采纳答案by montrealist

2018 NOTE:This answer is obsolete; feel free to propose an edit to this answer that will work.

2018 年注意:此答案已过时;随时对这个答案提出一个可行的编辑。

You can bind the ajaxStart and ajaxStop using custom namespace:

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

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

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

Then, in other parts of the site you'll be temporarily unbinding them beforeyour .json calls:

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

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

Got the idea from herewhile searching for an answer.

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

EDIT:I haven't had time to test it, alas.

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

回答by Hasnat Safder

There is an attribute in the options object .ajax() takes called global.

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

If set to false, it will not trigger the ajaxStartevent for the call.

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

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

回答by Jason Rikard

If you put this in your function that handles an ajax action it'll only bind itself when appropriate:

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

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

回答by Ramya Muthukumar

Use local scoped Ajax Events

使用本地范围的 Ajax 事件

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

回答by GxiGloN

Furthermore, if you want to disablecalls to .ajaxStart()and .ajaxStop(), you can set globaloption to falsein your .ajax()requests ;)

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

See more here : How to call .ajaxStart() on specific ajax calls

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

回答by SolutionYogi

Unfortunately, ajaxStart event doesn't have any additional information which you can use to decide whether to show animation or not.

不幸的是,ajaxStart 事件没有任何可用于决定是否显示动画的附加信息。

Anyway, here's one idea. In your ajaxStart method, why not start animation after say 200 milliseconds? If ajax requests complete in 200 milliseconds, you don't show any animation, otherwise you show the animation. Code may look something like:

无论如何,这是一个想法。在您的 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);
    }
 );

回答by Zigri2612

use beforeSend or complete callback functions in ajax call like this way..... Live Example is here https://stackoverflow.com/a/34940340/5361795

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

Source ShoutingCode

来源ShoutingCode

回答by Ollie Brooke

I have a solution. I set a global js variable called showloader (set as false by default). In any of the functions that you want to show the loader just set it to true before you make the ajax call.

我有一个解决方案。我设置了一个名为 showloader 的全局 js 变量(默认设置为 false)。在您想要显示加载器的任何函数中,只需在进行 ajax 调用之前将其设置为 true。

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

Then I have the following in my head section;

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

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

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

回答by Emil Stenstr?m

Use ajaxSend and ajaxComplete if you want to interspect the request before deciding what to do. See my reply here: https://stackoverflow.com/a/15763341/117268

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

回答by Praveen04

<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.");
});

Just Go through this example you get some idea.When the user clicks the element with class Local and the Ajax request is sent, the log message is displayed.

看看这个例子,你就会有一些想法。当用户单击类 Local 的元素并发送 Ajax 请求时,会显示日志消息。