javascript - 每个选项卡的 Ajax 调用函数

Question

我只使用 CSS 创建了响应式标签。但是当我尝试实现 ajax 调用时，我有点困惑。

我有几个问题:

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

任何其他改进、建议和更正也会有所帮助。

示例:JSFiddle

Answer 1

如果你必须使用 ajax，我会在你需要加载的所有数据中运行一次循环，然后将数据存储在变量(或本例中的对象)中

更改事件将从已填充的 tabData 中获取 ID，您无需再次调用 ajax 页面。

现在这将解决您的缓存问题，因为在这种情况下您不需要它

如果您想在打开页面时立即填充第一个选定的选项卡，请在 ajax 成功中创建一个 if 语句

最终结果看起来是这样的:

$(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);
    }
});