初始阿賈克斯調用的外部使用JSON數據 -

Question

這部分的擴展，我的Previous Question訪問剩餘的JSON數據：

現在我可以成功地從我的CI控制器返回JSON數據，回報：

{"results":[{"id":"1","Source":"My Source","Title":"My Title". . . . 

的控制器：

function outputAjax() 
{ 
    $this->load->model('my_model'); 
    $data['results'] = $this->site_model->getInfo(); 
    $this->output->set_output(json_encode($data)); 
} 

這是米Ÿ當前的腳本我使用檢索.ajax要求：

$(document).ready(function() 
     {  
      $.ajax(
      { 
       url: 'http://localhost/project/index.php/controller/outputAjax', 
       dataType:'json', 
       success: function(data) 
       { 
        var limit = 19; //how many json objects are needed initially 
        var arr = []; // item.id of objects that have been used 
        $.each(data.results, function(index,item) 
        { 
         if (index > limit) return false; // gets required initial json objects 
         arr.push(item.id); // stores used json objects id's 

         // whole bunch of checks on item.id , item.Title, item.Description, etc... 

         $("#masonry-content").append('<div class="item" ' + item.id + item.Title + ' ... </div>'); 
        }); 

正如上面的代碼所示，我目前正在JSON數據的前20個對象，並將它們附加到頁面容器。這工作得很好，但..

我遇到的問題是，我想更新已追加到頁面上的time interval與最初返回的JSON數據的其他對象的20個div的內容。我覺得最好的辦法是在頁面上靜態佈局div，因爲總是會有相同的數量，然後相應地更新這些div中的數據。

我的問題是我如何仍然訪問返回的JSON數據一次超出最初的.ajax調用範圍。

例如：如果我將離開腳本設置事情是這樣的，我做出初步.ajax呼叫並append()內容到容器的前20個JSON數據對象（item）之後。我如何訪問JSON數據中的其餘對象？

我已經假定我最好的選擇，以跟蹤返回的對象是將每個對象的item.id存儲在一個數組中arr[ ]如果這沒有意義，或者它們是一個更簡單的方法，請糾正我。但是，我仍然不知道如何訪問剩餘的JSON數據對象？

我覺得好像我缺少明顯的東西，如讓我的JavaScript更面向將有助於這樣的話，我可以訪問每一個JSON對象，並對其執行不同的功能，但我覺得對象雖然我可能會丟失小。

Answer 1

我認爲你可以將你的json存儲在一個全局變量中，並根據需要遍歷這些項目，從20開始，在成功加載json之後調用setDivs(20)。

// Declaration of global variables 
data = ''; // JSON data will be stored here 
myurl = 'http://localhost/project/index.php/controller/outputAjax'; 
index = 0; 

$(document).ready(function() { 
    $.getJSON(myurl, function (JSON) { data = JSON; setDivs(20); }); 
    $('#next20').click(function() { setDivs(20); }); 
}); 

function setDivs(num) { 
    $("#masonry-content").empty(); 
    for (var i = index ; i < index + num -1; i++) { 
     $("#masonry-content").append('<div class="item" ' + data["results"][i].id + data["results"][i].Title + ' ... </div>'); 
    } 
    index += num; 
} 

我還添加代碼，這將在點擊頁面上的元素#next20從JSON對象在未來20個div的更新#masonry-content元素。

當然，我不知道你的#masonry-content元素是否是空的開始。如果不是的話，再加入一些像<div id="json-data"></div>你#masonry-content元素中，並通過與$('#json-data')

如果data["results"][i]不起作用更換的$('#masonry-content")兩個實例相應地更新上面的代碼，也許嘗試data.results[i]。

如果您使用Chrome，請拉起控制檯（CTRL + SHIFT + J）並輸入data，然後按回車。如果JSON已成功加載，則應該能夠瀏覽數據對象的樹。然後你可以在控制檯上玩弄它，嘗試data["results"],data.results等，並繼續工作（即嘗試data["results"][0]並驗證它是否拉出第一項）。

更新：

這裏的工作JSON/AJAX Ticker例子隨機交換項目每4.5秒。它的建造是爲了響應臨時工的follow-up question on stackoverflow。

Answer 2

您可以簡單地在ajax調用之外聲明一個變量，然後在您的ajax函數中將變量值更新爲完整的json對象。請參閱下面我命名變量data

$(document).ready(function() 
     { 

     var data = ''; 

      $.ajax(
      { 
       url: 'http://localhost/project/index.php/controller/outputAjax', 
       dataType:'json', 
       success: function(data) 
       { 

        data = data; 

        }); 

不過，我會親自創建的，你想怎麼一個單獨的元素出現，然後只需填寫數據，而不是試圖搜索特定的標籤20米的地方，然後模板DIV用新數據替換數據。我認爲基本上清空會更簡單高效$("#masonry-content").empty();然後使用append或類似的東西來填充新元素。