如何使用PJAX？(使用PHP的PJAX？)

Question

我正在尝试让PJAX与我的PHP站点一起工作，这是我正在使用的代码：

<script src="js/jquery.js"></script> 
<script src="js/jquery.pjax.js"></script>
    <script type="text/javascript">
        $(function(){
            // pjax
            $('ul a').pjax('section')
        })
    </script>

我只是使用他们在PJAX演示页面上使用的代码，但将他们使用的容器(#main)替换为我的站点的容器，即section标签。在控制台或页面上没有错误，但它也不工作！在我使用之前

$(function() { $('ul a').pjax('section') });和

$('document').ready(function(){
   $('ul a').pjax('section')
});

但是，当我没有使用这两种方法，而只是使用$('ul a').pjax('section')时，我在控制台中看到以下错误：

未捕获jquery.pjax.js中的节的pjax容器(第353行)

我能得到一些帮助吗？谢谢

Answer 1

默认情况下，pjax期望在没有chrome的情况下交付新页面，chrome是一个HTML片段，将用作容器的innerHTML。

在您的示例中，容器应该是第一个<section>标记。我不知道pjax是否保证它会使用第一个匹配选择器的元素--它可能会替换所有匹配的元素。也许使用ID选择器会更好，比如#main。

无论如何，听起来您不是在传递HTML片段，而是传递整个页面。这几乎违背了pjax的目的，但是可以通过在下载的内容中指定一个片段来支持它。这几乎总是一个选择器，它与要替换的容器相匹配。

因此，假设您使用一个带有@id=main的容器，您可以用

$(function() { $("ul a").pjax("#main", { fragment: "#main" }); });

确保在文档加载后调用pjax，否则容器查找将失败。

顺便说一下，切换到pushState辅助导航的一种更简单的方法是使用我的HTMLDecor项目。它要求你改变生成超文本标记语言页面的视角，但是一旦你改变了视角，你只需要将HTMLDecor.js脚本添加到你的页面中，并且pushState会在适当的时候自动使用--不需要配置。