多个内容与Ajax/JSON加载
我已经实现了使用Ajax的外部内容加载。现在我想使用我拥有的Json对象代码添加多个容器加载功能。多个内容与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对象:
变种JSON = [{ 'ID': '内容', '包装': '__content-包装'},{ 'ID': '内容2', '包装': '__content-wrapper2'}];
但我也必须改变页面加载的功能,使其与所传递的新变量的工作原理:
功能页面加载(ID,包装){
}
我还我想特别说明这一点:
- 为了能够从html页面中相应的#div中提取内容,(我们称之为#div 1) (让我们称之为featured.html),并点击第一个导航菜单中的任何选项卡(可以称之为#topnav)。
- 为了能够从另一个html页面中的相应#div中提取内容(让我们称之为#div 2),点击第二个导航栏中的任意选项卡(让我们称之为news.html)菜单,(让我们叫它#vertnav-bar)。
P.S每次点击只有一个div被加载。 (从你解释的内容来看,我认为这个特别的细节很重要,我提到关于页面载入调用函数,换句话说,没有人给出时间点将数据加载到多于一个#div
I倒是对于任何帮助,非常感谢
问候 保罗
如果我理解正确的话,你需要的东西,将采取JSON数据taht已加载通过Ajax调用,并把这个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对象与类别一起加载并将它们加载到下拉列表中。每次父类别更改时,子将被重新加载。它看起来像你的例子简化的情况。
Jovan