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

Use JSON data outside of initial .ajax call - Access leftover JSON data

本文关键字：数据 JSON 访问 ajax 调用      更新时间：2023-09-26

这在一定程度上是对我上一个问题的扩展:

我现在可以成功地从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数据的其他对象的20div中的内容。我觉得这样做的最好方法是在页面上静态地布局div，因为总是会有相同的数量，然后只需相应地更新这些div中的数据。

我的问题是如何在初始.ajax调用的范围之外访问返回的JSON数据。

例如:如果我将脚本设置的方式是，在我使初始.ajax调用和append()的内容与前20个JSON数据对象(item)的容器。如何访问JSON数据中的其余对象?

我已经假定跟踪返回对象的最佳方法是存储项。每个对象的id在一个数组arr[ ] 请纠正我，如果这没有意义或他们是一个更容易的方式。但是，我仍然不知道如何访问剩余的JSON数据对象?

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

我认为您可以将json存储在全局变量中，并在需要时循环遍历项目，从成功加载json后调用setDivs(20)从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对象中更新#masonry-content元素的下一个20div。

当然，我不知道如果你的#masonry-content元素是空的开始。如果不是，那么在#masonry-content元素中添加类似<div id="json-data"></div>的东西，并通过将$('#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秒随机交换项。

您可以简单地在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();，然后用新的元素填充它使用追加或类似的东西。

相关文章：