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データの他のオブジェクトでページに追加された20divのコンテンツを更新したいということです。これを行う最良の方法は、常に同じ量が存在するため、ページ上にdivを静的にレイアウトし、それに応じてそれらのdivのデータを更新することです。

私の質問は、最初の.ajax呼び出しの範囲外になったら、返されたJSONデータにアクセスするにはどうすればよいかということです。

例：スクリプトのセットアップをそのままにしておくと、最初の.ajax呼び出しとappend()、最初の20個のJSONデータオブジェクト（item）を含むコンテナーへのコンテンツを作成した後です。JSONデータの残りのオブジェクトにアクセスするにはどうすればよいですか？

返されたオブジェクトを追跡するための最善の策は、各オブジェクトのitem.idを配列に格納することであるとすでに想定していましたarr[ ] 。これが意味をなさない場合、またははるかに簡単な方法である場合は、修正してください。しかし、残りのJSONデータオブジェクトにアクセスする方法がまだわかりませんか？

javascriptをよりオブジェクト指向にするなど、明らかな何かが欠けているように感じます。そうすれば、各jsonオブジェクトに個別にアクセスして、さまざまな機能を実行できますが、少し迷うかもしれません。

4

2 に答える 2

2

setDivs(20)jsonをグローバル変数に格納し、jsonを正常に読み込んだ後に呼び出すことで、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;
}

また、ページ上の要素#masonry-contentをクリックすると、jsonオブジェクトから次の20divで要素を更新するコードを追加しました。#next20

もちろん、そもそもあなたの#masonry-content要素が空かどうかはわかりません。そうでない場合は、要素<div id="json-data"></div>内に次のようなものを追加#masonry-contentし、の両方のインスタンスをに置き換えて、それに応じて上記のコードを更新し$('#masonry-content")ます$('#json-data')

data["results"][i]うまくいかない場合は、試してみてくださいdata.results[i]。

Chromeを使用している場合は、コンソールを引き上げ（CTRL + SHIFT + J）、data入力してEnterキーを押します。JSONが正常に読み込まれると、データオブジェクトのツリーを探索できるはずです。次に、コンソールでそれを試してみたりdata["results"]、data.results試したりして、作業を続けます（つまりdata["results"][0]、最初のアイテムが引っ張られることを確認してください）。

アップデート：

これは、4.5秒ごとにランダムにアイテムを交換するJSON /AJAXTickerの実用的な例です。これは、stackoverflowに関するtwhylerのフォローアップ質問に応えて作成されました。

于 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;

                    });

ただし、20箇所で特定のタグを検索してそのデータを新しいデータに置き換えるのではなく、個々の要素をどのように表示するかを示すテンプレートdivを個人的に作成し、データを入力するだけです。基本的に空にする方がはるかに簡単で効率的だと思います。$("#masonry-content").empty();次に、appendなどを使用して新しい要素を補充します。

于 2013-01-10T20:21:07.610 に答える