每个标签的Ajax调用函数

我创建了使用css的响应标签。但是当我尝试实现ajax调用时，我有点困惑。每个标签的Ajax调用函数

我有几个问题：

是什么力量让每个标签Ajax请求的最佳方式？
是否有任何最短的方式将响应追加到“标签”div？
如何在页面加载时为选定的选项卡调用ajax？
第一次点击标签后，不需要再次进行ajax调用。我需要缓存响应，但“cache:true”不起作用。

此外，任何其他改进，建议和更正将有所帮助。

例子：JSFiddle

来源

2017-03-17 linepisode

我不会用ajax所有内容是否不会改变你可以直接存储在它javascript变量考虑。而不是放在该标签的相关数据中的点击标签上。 – herriekrekel

感谢您的建议。我认为我们可以通过使用变量来处理缓存问题。但我仍然想知道如何使用ajax缓存。还有其他问题的答案。 – linepisode

如果必须使用AJAX我想通过你需要加载在一个变量做一次的存储中的数据的所有数据运行一个循环（或者在这种情况下对象）

比变化事件将从已经填充的tabData中获得id，并且不需要再次调用ajax页面。

现在这将解决您的缓存问题，因为如果你想瞬间填充第一选择的选项卡，当你打开网页，如果在阿贾克斯成功语句中创建你不会需要它这个场景

最终的结果看起来会沿着这些路线：

$(document).ready(function() { 
    //data for the tabs 
    var tabs = { 
     1:"tabone", 
     2:"tabtwo", 
     3:"tabthree" 
    } 

    //empty object for now will be filled with ajax data 
    var tabData = {}; 

    var activeTabVal=1; 
    var activeTabID = $('input[name=tabs]:checked', ".tabs").attr('id'); 


    for(key in tabs) { 
     ajaxCall(key); 
    } 



    $('.tabs input').on('change', function() { 
     var activeTab=$('input[type="radio"]:checked', '.tabs').val(); 
     var tabElement = $('input[name=tabs]:checked', ".tabs").attr('id'); 
     //since we have the data already no need to call ajax here we just get it out of our already loaded data 
     var data = tabData[activeTab]; 
     replaceData(tabElement, data); 
    }); 

    function ajaxCall(key){ 
     $.ajax({ 
      type: "POST", 
      dataType: 'jsonp', 
      url: 'https://jsonplaceholder.typicode.com/posts/'+key, 
      async: false, 
      cache: true, 
      contentType: "application/json; charset=utf-8", 
      success: function (msg) { 
       tabData[key] = msg.body; 
       //use this to imediatly populate the selected div fo your second point 
       if(key == activeTabVal) { 
        replaceData(tabs[key], tabData[key]); 
       } 
      } 
     }); 
    } 

    function replaceData(tabElement, tabData) { 
     $('#'+tabElement).next().next().closest('div').append(tabData); 
    } 
});

来源

2017-03-17 23:40:47 herriekrekel

非常感谢@herriekrekel。我还有一个问题。如果我不想加载所有数据，只需在点击标签时拨打即可。有没有办法做到这一点？ – linepisode

是的，你应该不是循环浏览ajaxCalls，而是像你自己一样调用ajaxCall。比在ajax调用周围创建一个if（tabsData [key]！=='undefined'），所以当我们已经设置的数据比调用replaceData函数在元素中设置它时不需要再调用它 – herriekrekel

我想与其说这是在变动我会叫它选项卡上的按钮，点击
给你的标签数据-ID和相应的div容器相同的数据-ID，那么如果你绑定它上面点击，你可以简单地运行$('.tab-button .active').trigger('click');
如果我是你，我会的数据存储到容器div的数据部分和再磨片找回它，当你追加，你可以这样做$('.tab-container[data-id='+$(this).attr('data-id')+']').append('The content');
他们再次点击它。所以你只要检查它是否被设置，如果没有，那么就做一个Ajax调用，如果它只是拔出并显示它。 https://api.jquery.com/jquery.data/

来源

2017-03-17 23:31:39 Chris

每个标签的Ajax调用函数

回答

相关问题