使用jQuery load（）和json加载外部内容

我对ajax没有太多的经验，并想知道是否有可能使用jQuery的load（）方法+ json将外部内容加载到一堆空的div中。使用jQuery load（）和json加载外部内容

我有以下为出发点：

<div id="aboutUs"></div> 
<div id="whatWeDo"></div> 
<div id="ourValues"></div> 
<div id="ourExpertise"></div> 

var loadPages = { 'pageData' : [ 
    { 
     'loadInTo'  : '#aboutUs', 
     'url'   : 'http://www.website.co.uk/aboutUs.html', 
     'urlSection' : '#aboutUs' 
    }, 
    { 
     'loadInTo'  : '#whatWeDo', 
     'url'   : 'http://www.website.co.uk/whatWeDo.html', 
     'urlSection' : '#whatWeDo' 
    }, 
    { 
     'loadInTo'  : '#ourValues', 
     'url'   : 'http://www.website.co.uk/ourValues.html', 
     'urlSection' : '#ourValues' 
    }, 
    { 
     'loadInTo'  : '#ourExpertise', 
     'url'   : 'http://www.website.co.uk/ourExpertise.html', 
     'urlSection' : '#ourExpertise' 
    } 
] }

的“loadInto” specifys，我要插入页面上的HTML，“网址”是我从和加载页面“ urlSection'是我想要加载的网址的一部分。

任何人都可以帮助我指出正确的方向吗？提前谢谢了。

来源

2011-10-21 mtwallet

你想加载json数据或只是纯html？ – Steve

不知道为什么你有loadInTo和urlSection，因为它们是相同的，但你可以这样做：

for(i=0; i < loadPages.pageData.length ; i++){ 
    var current = loadPages.pageData[i]; 
    $(current.urlSection).load(current.url); 
}

如果网站内容是不是在同一个网站，你将不得不使用JSON

http://api.jquery.com/jQuery.ajax/

请参阅crossDomain。

来源

2011-10-21 10:45:31 Steve

我应该解释我是一名设计师而不是开发人员，我试图在这里发挥创造力，并怀疑这将导致我失去一条长长的头部划痕！但是，四个div中基本上有三个会被隐藏起来，但是准备好像jQuery滑块一样转换。我认为我可以重新使用代码来加载其他级别的导航，因此，如果某个使用点击了第二级导航，它将查询该级别的所有页面，则上述内容将成为顶级元素，依此类推。无论如何，你的解决方案工作得很好，谢谢你的帮助我欣赏它 – mtwallet

你仍然可以使用这个，但将div设置为style =“display：hidden”，那么当你点击nav时只需使用$（'＃div-name'） .show（）或.hide（）在适当的位置。 – Steve

我会感谢史蒂夫。 – mtwallet

如果你想加载外部内容，你需要处理跨域问题。有多种方法可以解决这个问题 - 你可能想研究跨域的Ajax请求，有很多关于解决方法的文档。

是否有任何理由将您从主机站点的另一个URL中提取内容？

对于你想要做的事，假设你在主机上启用了类似于PHP的东西，使用类似代理的方法将是最好的。

创建一个名为“AJAboutUs.php”，把下面的内容的PHP文件：

<?php 
include('http://www.website.co.uk/aboutUs.html'); 
?>

然后让你的load（）函数引用“AJAboutUs.php” - 因为这是它应该本地文件显示内容。

来源

2011-10-21 10:54:00

使用jQuery load（）和json加载外部内容

回答

相关问题