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'}];

但是我还必须更改页面加载功能，以便它可以使用传递的新变量：

function pageload（id，wrapper）{

}

我还想补充一点，这是我特别想要完成的事情：

通过点击第一个导航中的任意一个标签，能够将内容加载到html页面中相应的#div中提取（让我们称之为#div 1）（让我们称之为featured.html）菜单，（我们称之为#topnav）。
能够通过点击第二个导航中的任何一个标签，将内容加载到另一个html页面中的相应#div中，（将其调用#div 2）（让我们称之为news.html）菜单，（我们称之为#vertnav-bar）。

P.S每次点击只加载一个div。（根据你的解释，我认为这个特别的细节很重要，我提到了关于页面加载调用功能。换句话说，在任何给定的时间点，点击都不会将数据加载到多个#div

我非常感谢任何帮助

祝你好运保罗

Answer 1

如果我理解正确，你需要一些能够通过Ajax调用加载JSON数据的东西，并把这个JSON对象放到一些HTML中。也许你应该在http://code.google.com/p/jquery-load-json/ JQuery插件上拿一台织机。它使您能够将json对象加载到任何html元素

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

其中'div1'是元素的id，jsonObject是你已经加载的JSON对象。插件站点上的示例很少可以帮助您作为示例http://jquery-load-json.googlecode.com/svn/trunk/categories-ajax.html，其中显示了如何将json对象与类别一起使用并将其加载到下拉列表中。每次父类别更改时，将重新加载子级。它看起来就像你的例子的简化情况。

约万

使用ajax / json加载多个内容div

1 个答案: