Многократная загрузка контента с помощью ajax / json

Question

Я реализовал внешнюю загрузку контента с помощью Ajax. А теперь я хотел бы добавить функциональность загрузки нескольких контейнеров, используя имеющийся у меня объектный код Json.

Не могли бы вы помочь мне включить объектный код json в код Ajax. Мои знания в области кодирования очень ограничены :)

Вот подробная информация:

Вот объект json:

var json = [{'id': 'content', 'wrapper': '__content-wrapper'},{'id': 'content', 'wrapper': '__content-wrapper'}] 

$.each(json, function(i, itm) {
$('#'+itm.id).wrap('<div id="' + itm.wrapper + '"></div>');
pageload(itm.id, itm.wrapper);
}

function pageload (id, wrapper) {

}

Вот код Ajax:

$(document).ready(function() {

    var contentWrapID = '___content-wrapper';

    $('#content').wrap('<div id="' + contentWrapID + '"></div>');

    function showNewContent() {
        $("#" + contentWrapID).slideDown();
        $('#load').fadeOut();   
    }

    function pageload(hash) {
        if(hash) {
            $("#" + contentWrapID).load(hash + " #content",'',function(){
                if($('img:last',this).get(0)) {
                    $('img:last',this).load(function(){
                        showNewContent();
                    });
                } else {
                    showNewContent();
                }

            });
        } else {
            $("#" + contentWrapID).load("index.html #content");
        }
    }
    $.historyInit(pageload);

    $('#topnav li a').click(function(){

        var hash = $(this).attr('href');
        hash = hash.replace(/^.*#/, '');
        $("#" + contentWrapID).slideUp(300,function(){
            $.historyLoad(hash);
        });
        if(!$('#load').get(0)) {
            $('#container').append('<span id="load">LOADING...</span>');
        }
        $('#load').fadeIn('normal');
                                   $('#topnav li a').removeClass('current'); 
                                   $(this).addClass('current'); 
        return false;



    });

});

........................

Насколько я понимаю, я должен заменить эту строку:

var contentWrapID = '___ content-wrapper';

с объектом json:

var json = [{'id': 'content', 'wrapper': '__content-wrapper'}, {'id': 'content2', 'wrapper': '__content-wrapper2'}];

Но мне также нужно изменить функцию загрузки страницы, чтобы она работала с переданными новыми переменными:

функция загрузки страницы (id, оболочка) {

}

Я также хотел бы добавить, что это именно то, чего я пытаюсь достичь, в частности:

1. Чтобы иметь возможность загружать контент в (давайте назовем это #div 1), извлеченный из соответствующего #div на html-странице, (давайте назовем его featured.html), щелкнув любую из вкладок в первой навигации меню, (назовем это #topnav).
2. Чтобы иметь возможность загружать контент в (давайте назовем это #div 2), извлеченный из соответствующего #div на другой html-странице, (назовем это news.html), щелкнув любую из вкладок во второй навигации меню, (назовем это # ​​vertnav-bar).

P.S Только один div загружается за каждый клик. (Из того, что вы объяснили, я думаю, что эта конкретная деталь важна, которую я упомяну в отношении вызывающей функции загрузки страницы. Другими словами, ни в одном конкретном моменте времени щелчок не будет загружать данные в более чем один #div

Буду очень признателен за любую помощь

С наилучшими пожеланиями Пол

Answer 1

Если я вас правильно понимаю, вам нужно что-то, что возьмет данные JSON, которые вы загрузили с помощью вызовов Ajax, и поместит этот объект JSON в некоторый HTML. Может быть, вы должны взять ткацкий станок в плагине http://code.google.com/p/jquery-load-json/ JQuery. Это позволяет вам загружать объект json в любой элемент html

$("#div1").loadJSON( jsonObject );

Где 'div1' - это идентификатор вашего элемента, а jsonObject - это объект JSON, который вы уже загрузили. На сайте плагинов есть несколько примеров, которые могут помочь вам, например: http://jquery -load-json.googlecode.com / svn / trunk / Categories-ajax.html , где показано, как вы можете использовать json Объект с категориями и загрузить их в раскрывающийся список. Каждый раз, когда изменяется родительская категория, дочерний элемент будет перезагружен. Это похоже на упрощенный случай вашего примера.

Йован