2

这部分是对我以前的问题的扩展：

我现在可以从我的 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 中的数据。

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

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

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

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

4

2 回答 2

2

我认为您可以将 json 存储在全局变量中，并根据需要循环遍历项目，从 20 开始，setDivs(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在单击页面上的元素时使用 json 对象中的下 20 个 div 更新您的元素#next20。

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

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

如果您使用的是 Chrome，请打开控制台 (CTRL+SHIFT+J) 并键入data并按 Enter。如果 JSON 已成功加载，您应该能够探索数据对象的树。然后您可以在控制台中使用它，尝试data["results"]等等data.results，并继续按您的方式工作（即尝试data["results"][0]并验证它是否拉动了第一个项目）。

更新：

这是一个有效的JSON/AJAX Ticker示例，它每 4.5 秒随机交换项目。它是为了回应 twhyler关于 stackoverflow 的后续问题而构建的。

于 2013-01-10T18:48:44.943 回答
1

您可以简单地在您的 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;

                    });

但是，我会亲自创建一个模板 div，说明您希望单个元素如何显示，然后只需填写数据，而不是尝试在 20 个位置搜索特定标签，然后用新数据替换该数据。$("#masonry-content").empty();我认为基本上清空然后使用 append 或类似的东西用新元素重新填充它会更容易和有效。

于 2013-01-10T20:21:07.610 回答