每個標籤的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調用函數

回答

相關問題