我们在切换选项卡的时候,如果使用的是ajax技术,会碰到如下情况:点击tab1选项,服务器发出一个Ajax请求获取该选项tab1的内容数据。如果请求正在处理,并且在此过程中你点击了tab2选项并发送一个新的请求,服务器现在就有了两个请求挂起。页面出现的结果是,在显示的数据内容时,先显示tab1选项的内容数据,再接着显示tab2选项内容。 在这种情况下,我们应该取消tab1挂起的请求,仅允许处理当前(tab2)请求 新建一个index.html 代码如下: 复制代码 代码如下: <!--<BR>*{margin:0;padding:0;}<BR>li{list-style-type:none;}<BR>.tab{<BR>width:240px;<BR>margin: 50px auto;<BR>}<BR>.nav ul{<BR>clear:both;<BR>}<BR>.nav ul li{<BR>margin-right: 4px;<BR>padding: 1px 6px;<BR>border:1px solid #ccc;<BR>width:60px;<BR>background: #f1f1f1;<BR>float: left;<BR>text-align: center;<BR>cursor: pointer;<BR>}<BR>.nav ul li.selected{<BR>color:#fff;background:blue;<BR>} <P>#box{<BR>width:238px;<BR>border: 1px solid #ccc;<BR>height: 100px;<BR>clear: both;<BR>overflow: hidden;<BR>}<BR>.addBg{<BR>background: url('./img/loading.gif') no-repeat center;<BR>}<BR>--> // <![CDATA[<BR>$(function()<BR>{<BR>var ajax;<BR>$.ajax({<BR>type: 'GET',<BR>url: '4.php',<BR>data: 'what=1',<BR>success:function(data)<BR>{<BR>//加载成功后移除小图标<BR>// $("#box").removeClass("addBg");<BR>// $('#box').html(data);<BR>$("#box").removeClass("addBg").html(data); <P>},<BR>beforeSend:function() //<BR>{<BR>//加载过程中得等待小图标,先清空box的内容<BR>$("#box").html('').addClass("addBg");<BR>}<BR>}); <P>$('.nav ul li').click(function()<BR>{ <P>$(this).addClass('selected')<BR>.siblings().removeClass('selected');<BR>var liName = $(this).attr('name');<BR>//alert(liName);<BR>//加载过程中得等待小图标,先清空box的内容<BR>$("#box").html('').addClass("addBg"); <P>if(ajax)<BR>{<BR>ajax.abort();<BR>//alert(ajax);<BR>} <P>ajax = $.get(<BR>'4.php',<BR>{what : liName},<BR>function(data)<BR>{<BR>//加载成功后移除小图标<BR>$("#box").removeClass("addBg");<BR>$('#box').html(data);<BR>}<BR>); <P>});<BR>});<BR>// ]]> tab 1 tab 2 tab 3 再建立一个4.php文件 代码如下: 复制代码 代码如下: sleep(1); if(isset($_GET['what'])) { switch($_GET['what']){ case 1: echo '111111111111111';break; case 2:echo '22222222222222222';break;case 3:echo '33333333333333333';break;default: echo '没有内容'; }} ?> 还要建一个文件夹js,里面放一个jquery-1.4.4.min.js文件,不一定是1.4.4版本; 建一个文件夹img,里面放一个loading.gif等待的图片 将index.html + 4.php + js(文件夹) +img(文件夹)放到www文件中,用浏览器运行 http://www.bkjia.com/PHPjc/326729.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/326729.htmlTechArticle我们在切换选项卡的时候,如果使用的是ajax技术,会碰到如下情况:点击tab1选项,服务器发出一个Ajax请求获取该选项tab1的内容数据。如果...