我的设置是这样的(为清楚起见简化了):
<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
但是请求继续加载。
您的xhr变量位于click事件发生时调用的函数内部。
调用中止方法时,xhr不是用于post方法的变量。
xhr
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; });