AJAX只请求一次。

Question

有三个选项卡，点击时，AJAX请求数据，三个选项按钮返回的数据是不一样的。比如：点击A选项，获取数据，再点B选项获取数据，这时候，回过来再点A选项时，不需要再次AJAX，这个地方如何操作。哪位朋友分享下思路。

Answer 1

按照我的看法，上面的回答都不完美。
首先，异步会有延迟，假设第一个选项卡第一次请求还没完成，变量没赋值的时候，又触发一次第一个选项卡的异步请求，这时第一个选项卡会有两次异步请求，会被赋值两次！
第二，异步请求会有失败的情况，所以只判断请求过就不再请求，那么请求失败的就一直没数据。

所以，要这样子：
1.判断每个选项卡赋过值没，赋过不请求；
2.没赋过值的，要请求，但是要它取消之前的请求（$.ajax()的abort()方法）；
3.请求成功对选项卡进行赋值；

Answer 2

核心就是 需要确认他是否已经请求过AJAX，如果请求过后，不然执行AJAX

1.JSON变量

var json={'a':flase,'b':false,'c':false};

a[0].click=function(){

    if(json.a)return;  //true 就不往下执行

    //AJAX  请求后

    a[0].click=json.a=ture;   //已经执行 赋值为true

        

}

2.自定义属性判断

a[0].click=function(){

    if($(this).attr('data-isClick'))return;  //true 就不往下执行

    //AJAX  请求后

    $(this).attr('data-isClick','true');    //已经执行 赋值为true

        

}

Answer 3

三个变量别，a = false b = false c = false ,当点击第一个选项卡的时候会触发ajax请求， a = true,再次点击判断a即可，其余类推。

Answer 4

弄个标志位不行么。。。

var data;

function tabA()

if(data){

    return data;

}else{

    data = ajax().fetch();  

}

function tabB()

if(data){

    return data;

}else{

    data = ajax().fetch();  

}

Answer 5

定义config.dataA=[],config.dataB=[]数组，用于存储数据
在发送请求时判断点击相对应的dataA或dataB是否为空，如果为空则发送请求，在把请求的数据存储到相对应的dataA或dataB中，不为空则用dataA和dataB，就不用再请求数据；

Answer 6

添加标志位flag判断是否请求ajax，如果为true，则请求，请求后置为false，如果为false说明已经请求过了，或者一进来都请求了，点击时显示隐藏

Answer 7

第一次请求的时候，成功返回了数据就设置一个 var flag = true;
当再次点击选项卡要获取数据时先判断下flag是否为true，为ture则不再请求AJAX。

Answer 8

用一个对象 存一下不就好了么， {optionA: value, optionB: value } .请求之前先去这个对象里面捞一遍。捞不到就请求。请求出来了给相对应的option赋值就可以了，还是说我想的太简单？？

Answer 9

cache设置成true，然后然后代码依然，需要刷新的时候再设置成false。

Answer 10

给个自定义的data data_ajax默认为false，只要点击马上设置为true表示点击过了，这样依然不保险如果返回失败则设置为false，可以让用户在失败的时候继续请求

Answer 11

点每个选项的时候，将取得的数据缓存下来，可以绑在当前选项的自定义属性下，比如btn1.data=res，点第二个选项时，请求来的数据brn2.data=res，每次发送请求前，先判断当前btn上有没有自定义的那个属性(这里是data)，如果有，就说明缓存过，就用缓存的数据，如果没有，就发送ajax请求。他们说的设置标识位，可是也得缓存下数据吧。