json很多通過ajax加載第二次點擊

我是jQuery和ajax的新手。我正在創建一個應用程序，根據點擊的導航選項從同一個json文件加載不同的內容。json很多通過ajax加載第二次點擊

這是我的代碼：

$(document).ready(function(){ 

    var $wrapper = $(".wrapper"); 
    $(document).on("click", ".navLink", loadRecipes); 
    function loadRecipes(){ 

     var type = $(this).attr("href"); 
     $.ajax({ 

      type: "GET", 
      url: "recipes.json", 
      cache: false, 
      success: function(data){ 
      for(var i = 0; i < data.recipes.length; i++){ 

       var recipe = data.recipes[i]; 
       if(type == recipe.type){ 

        var name = "<h3 class='recipeTitle'>" + recipe.name + "</h3>"; 
        $wrapper.append(name); 

       } 

      } 

     }); 
     return false; 

    } 

})

並且json看起來像：

{ 
"recipes":[ 
{"name": "A", "type":"type1"}, 
{"name": "B", "type":"type2"}, 
{"name": "C", "type":"type2"}, 
{"name": "C", "type":"type1"} 
] 
}

href屬性在JSON文件類型屬性相匹配。因此，點擊特定鏈接時，會加載json的特定元素。當我第一次點擊其中一個鏈接時，會加載相應的內容。但是，當我嘗試點擊另一個鏈接，點擊事件觸發，但JSON內容不加載。我已經在click事件上引入了事件委託，但它沒有幫助。我認爲這可能是一個緩存問題，所以我添加了緩存：false參數，但它也沒有幫助。如果任何人都可以給我一個線索，我可能會錯過什麼，我將不勝感激。

來源

2017-05-05 Natka

你確定'.wrapper'元素一直存在嗎？我的意思是你說導航..所以它不確定這個元素是否存在..除此之外，你可以嘗試在'success'中放置'debugger'來查看第二次點擊是否到達預期的位置。 –

您從相同的鏈接中獲取相同的內容，即爲什麼Ajax沒有加載兩次。也許會適合你這樣的事情：

$(document).ready(function(){ 

var $wrapper = $(".wrapper"); 
$(document).on("click", ".navLink", loadRecipes); 
function loadRecipes(){ 

    var type = $(this).attr("href"); 
    $.ajax({ 

     type: "GET", 
     url: "recipes.json?type=" + type, 
     dataType: "JSON", 
     cache: false, 
     success: function(data){ 
      var recipe = data; 
      var name = "<h3 class='recipeTitle'>" + recipe.name + "</h3>"; 
       $wrapper.append(name); 

     } 

    }); 
    return false; 

}

}）

更改服務器的答案取決於輸入變量。答案是唯一的，你需要的數據：

{"name": "B", "type":"type2"}

或者你可以在任何情況下設置阿賈克斯只有一次獲得所有類型和點擊只是追加它來包裝。

來源

2017-05-05 11:58:36 Indra

英迪拉，非常感謝您的幫助。我試過使用你的解決方案，但它沒有奏效。然而，你寫的「你從相同的鏈接採取相同的內容」讓我想到 - 我曾嘗試將不同的數據類型分離成單獨的json文件，但仍然無法使用。但是我注意到，在開發人員工具的網絡選項卡中，單擊鏈接時正在加載相應的文件。實際上，我加載到$（「。wrapper」）的html要複雜得多 - 我簡化了它，因爲它在解釋我的問題時不相關。結果元素在頁面上佔用了更多空間。我覺得有點傻，但我注意到新內容實際上正在加載，但只是在頁面的底部，舊內容仍然處於頂端。解決這個問題的方法就是清空成功響應函數頂部的$（「。wrapper」）。

來源

2017-05-05 16:26:15 Natka

json很多通過ajax加載第二次點擊

回答

相關問題