javascript - 在初始 .ajax 调用之外使用 JSON 数据 - 访问剩余的 JSON 数据

Question

这部分是对 Previous Question 的扩展我的:

我现在可以从我的 CI Controller 成功返回 JSON 数据，它返回:

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

Controller :

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 的其他对象更新已附加到页面的那 20 个 div 中的内容最初返回的 JSON 数据。我觉得最好的方法是在页面上静态布局 div，因为总是有相同的数量，然后相应地更新这些 div 中的数据。

我的问题 是，一旦超出初始 .ajax 调用的范围，我如何仍然可以访问返回的 JSON 数据。

例如:如果我让脚本设置保持原样，在我进行初始 .ajax 调用和 append() 之后> 包含前 20 个 JSON 数据对象 (item) 的容器内容。如何访问 JSON 数据中的其余对象？

我已经假设跟踪返回的对象的最佳方法是将每个对象的 item.id 存储在数组中 arr[ ] 如果这不正确请纠正我sense 或者它们是一种更简单的方法。但是，我仍然不知道如何访问剩余的 JSON 数据对象？

我觉得好像我遗漏了一些明显的东西，比如让我的 javascript 更面向对象会有所帮助，这样我就可以单独访问每个 json 对象并在其上执行不同的功能，但我觉得我好像可能会丢失一点。

Answer 1

我认为您可以将 json 存储在全局变量中，并根据需要循环遍历项目，通过调用 setDivs(20) 从 20 开始。成功加载 json 后。

// 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;
}

我还添加了代码来更新您的 #masonry-content单击 #next20 后，带有来自 json 对象的下 20 个 div 的元素页面上的元素。

当然，我不知道你的 #masonry-content元素一开始是空的。如果不是，则添加类似 <div id="json-data"></div> 的内容在你的里面 #masonry-content元素，并通过替换 $('#masonry-content") 的两个实例相应地更新上述代码与 $('#json-data')

如果data["results"][i]不起作用，也许试试 data.results[i] .

如果您使用的是 Chrome，请调出控制台 (CTRL+SHIFT+J) 并输入 data然后按回车。如果成功加载 JSON，您应该能够浏览数据对象的树。然后您可以在控制台中使用它，尝试 data["results"] , data.results等等，并继续向下工作(即尝试 data["results"][0] 并验证它是否拉出第一个项目)。

更新:

这是一个有效的 JSON/AJAX Ticker每 4.5 秒随机交换项目的示例。它是为了响应 twhyler 的 follow-up question on stackoverflow 而构建的。 .