通过AJAX加载页面HTML内容

时间:2013-08-27 作者:Rob Leach

我目前正在构建一个单页面风格的网站,通过AJAX加载所有内容,但如果没有javascript,则会降级为标准页面加载。

我过去通过wordpress进行过AJAX加载,所以我对它很熟悉。但是,我以前没有加载整个页面的内容。

我想做的是:

劫持对内部URL的点击,AJAX将其URL的内容加载到主内容div中。

我将把我的帖子/页面模板文件中的页眉/页脚/侧栏包装在一个函数中,以检查加载请求是否由ajax发出。如果是,则不会回显文件中的内容。

要做到这一点,我需要知道如何在函数中获取url的html内容。php。经过几个小时的搜索,我找不到任何可以让我这么做的东西。我所做的所有事情都与回显小部分内容有关,而不是整个页面的HTML。

如果有人能给我指出正确的方向,那就太好了!

干杯

2 个回复
最合适的回答,由SO网友:s_ha_dum 整理而成

AJAX请求是来自客户机的请求,就像任何其他请求一样。只需像普通一样请求URL,但使用Javascript即可。就这一点而言,这应该很简单。如果已完成第#2项--“我将包装页眉/页脚/侧栏…”--正确,应该没有问题except that page specific functions won\'t run. 这将是你必须解决的问题。我可以看到,在许多情况下,这都是一个问题。

说你有什么东西wp_head 它仅在加载特定主题模板时执行,并且需要执行。在您的系统中,只有当初始页面加载是针对该模板时,该选项才起作用。如果您加载一些其他页面,然后通过AJAX加载模板,那么wp_head, 或任何有条件执行的挂钩\',将不会运行。

您的AJAX回调必须处理许多挂钩--wp_header, wp_head, wp_footer... 我相信还有更多。事情可能会变得复杂。

SO网友:Baerkins

你试过HTML5历史API吗?

http://html5doctor.com/history-api/

至于AJAX,我只使用jQuery.load() 方法,拉入url,然后选择要引入的id。

假设您的主页具有如下HTML:

<body>
  <header><h1>Site Title</h1></header>
  <a class="trigger" href="#">Load Ajax</a>
  <section id="ajaxBin">
    <p>Content of the section</p>
  </section>
</body>
然后在将使用AJAX加载的页面上,有以下HTML:在此处输入代码

<body>
  <header><h1>Site Title</h1></header>
  <aside id="sidebar">
    <h2>Sidebar Info</h2>
    <p>This is content that should not load</p>
  </aside>

  <section id="container">
    <p>All of the content you want to load with AJAX</p>
  </section>

</body>
因此,如果您的所有内容都在希望使用ajax加载的页面上的“#containter”元素中,则可以执行以下操作:

var hrefVariable = $(this).attr(\'href\')+\'#container\';

jQuery(\'body\').on(\'click\', \'a.trigger\', function(e){
  // prevent link from doing it\'s thang
  e.preventDefault();
  // load specific content from an element within a new url into current pages element (#ajaxBin) 
  jQuery(\'#ajaxBin\').load(hrefVariable, callbackFunction);
});
这可以避免您编写额外的模板,因为您只需将HTML整理为能够提取所需内容即可。

这是a good tutorial 用那种方法。

结束

相关推荐

WordPress AJAX关系查询

使用高级自定义字段中的关系字段,我将艺术家链接到事件。这些艺术家和活动都是自定义的帖子类型。对于每个事件,相关美工人员的帖子ID作为自定义元字段(lineup\\u美工人员)存储在一个数组中。在每个活动页面上,我列出了所有艺术家。当你点击一个艺术家时,我想显示你能找到这个艺术家的所有事件(通过一个AJAX调用,它以引导模式显示结果)。我已经测试了AJAX调用,它正常工作,但查询有问题(需要很长时间才能完成)。在我的职能中,我有:$ArtistID = $_POST[\'ArtistID\']; // Ge