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

Question

$(".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不再发送请求?

Answer 1

你需要一个标志位，比如叫做currentTab，表示当前活跃的的Tab。

当某个Tab被点击时，就把该Tab赋给标志位。
在某个Tab被点击前，检查一下它是否与currentTab相等，如果是，则不发ajax请求。

Answer 2

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

Answer 3

$(".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请求
        
    });

Answer 4

数据缓存咯，如果是html数据，直接存到自定义属性上data-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.
        });
    }
});

Answer 5

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

Answer 6

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

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

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

Answer 7

$(".tabs").on("click","li",function(e){
        $(this).addClass("active").siblings().removeClass("active");  
        var index = $(this).index();
        $(".cat").removeClass("current");
        $(".cat").eq(index).addClass("current");
        if($(this).hasClass('hasData')) {  // 有了hasData类，就不执行下去
            return false;
        }
        var stat = $(this).data("stat");
        getInfo(stat);    //根据不同的stat发送不同的ajax请求
        $(this).addClass("hasData");    // 给已经启用ajax的添加一个类hasData;
    })