一尘不染

中止AJAX发布

ajax

我的设置是这样的(为清楚起见简化了):

<div class="methods">
    <a href="#a">Method 1</a>
    <a href="#b" class="fb_method">FB Method</a>
    <a href="#c">Method 3</a>
</div>

... <!-- contents -->

因此,每个方法(如果单击)都将淡入内联内容,但具有“ fb_method”类的锚点除外,因为它需要先执行AJAX请求,然后再附加到其内容容器中。

所以我的jQuery是这样的:

$('.methods a').click(function(){
    // do something global to the anchors, eg : change the bg color, etc
    // set the target container
    var target = $(this).attr('href');
    var xhr;

    //if user clicks fb_method buttons
    if($(this).hasClass('fb_method')){
        //do ajax request - NOTE 1
        xhr = $.post("/ajax/get_fb_albums.php",function(msg){                           
            $(target).html('').append(msg).fadeIn();
        });
    }else{
        //abort all ajax request
        xhr.abort();
        $(target).fadeIn();
    }
    return false;
});

所以我想要的是,当用户第一次单击fb_method按钮时,它将请求AJAX。但是,如果他们突然改变主意并单击其他方法,我想中止先前的AJAX请求。

我通过Firebug跟踪了它,并返回了xhr的错误,该错误未定义。如果我将xhr移到了if语句之前的NOTE
1中,它可以工作,但AJAX请求仍在处理中。当我单击FB方法然后单击其他方法时,我的意思是在Firebug中,它显示如下内容:

// ajax request xhr - keeps on loading
// ajax request xhr aborted

但是请求继续加载。


阅读 290

收藏
2020-07-26

共1个答案

一尘不染

您的xhr变量位于click事件发生时调用的函数内部。

调用中止方法时,xhr不是用于post方法的变量。

xhr变量必须在绑定到click事件的函数的外部,否则在检查其他click事件时将是未定义的。

此外,由于您可能需要多个xhr变量来存储不同的帖子,因此您应该创建一个数组或对象来存储不同的帖子。

var xhr = [];

$('.methods a').click(function(){
    // do something global to the anchors, eg : change the bg color, etc
    // set the target container
    var target = $(this).attr('href');

    //if user clicks fb_method buttons
    if($(this).hasClass('fb_method')){
        //do ajax request (add the post handle to the xhr array)
        xhr.push( $.post("/ajax/get_fb_albums.php", function(msg) {                           
            $(target).html('').append(msg).fadeIn();
        }) );
    }else{
        //abort ALL ajax request
        for ( var x = 0; x < xhr.length; x++ )
        {
            xhr[x].abort();
        }
        $(target).fadeIn();
    }
    return false;
});
2020-07-26