ajax导入html tab切换,点击tab切换,发送ajax请求数据,如何做到每次点击只发送一次请求？...

$(".tabs").on("click","li",function(e){

$(this).addClass("active").siblings().removeClass("active");

var index = $(this).index();

$(".cat").removeClass("current");

$(".cat").eq(index).addClass("current");

var stat = $(this).data("stat");

getInfo(stat);    //根据不同的stat发送不同的ajax请求

});

也知道另一种方法,就是先ajax获取所有数据填充到前端模版中,然后切换显示与隐藏。

但是 如何做到切换tab的时候再发送请求,点击一个tab只发送一次请求,再次点击这个tab不再发送请求?

你需要一个标志位，比如叫做

currentTab

，表示当前活跃的的Tab。

当某个Tab被点击时，就把该Tab赋给标志位。

在某个Tab被点击前，检查一下它是否与

currentTab

相等，如果是，则不发ajax请求。

缓存 ajax 获取的数据。

切换时，先判断有没有缓存过数据，已经有的直接显示，没有的再发送请求

$(".tabs").on("click","li",function(e){

if($(this).hasClass('active')) {

return false;

}

$(this).addClass("active").siblings().removeClass("active");

var index = $(this).index();

$(".cat").removeClass("current");

$(".cat").eq(index).addClass("current");

var stat = $(this).data("stat");

getInfo(stat);    //根据不同的stat发送不同的ajax请求

});

数据缓存咯，如果是html数据，直接存到自定义属性上

xxx

就行；如果是

json

数据，可以用变量缓存。

var cacheObj = {};

$('xxx').on('click', function () {

var index = $(this).index();

if (cacheObj[index]) {

// has cached.

}

else {

// do ajax.

var xhr = $.ajax({...});

xhr.done(function (res) {

cacheObj[index] = res;

// do else.

});

}

});

定义一个开关默认true ajax success后为false 点击ajax改为if(true) $.ajax({});

ajax

填充数据后根据有没有数据就可以决定是否再次请求了。

上面是一种方法，你也可以在获取到数据后在tab上增加一个class标识这个tab的数据已经获取过了。

上面朋友说的，加个容器记录一下是否ajax过。