Question

编辑:(非）工作示例： http://www.jogos-mmorpg.com/pjax.html

我正在尝试重现一个非常基本的PJAX示例，如自述文件中所述（https://github.com/defunkt/jquery-pjax）

这是index.html：

<!DOCTYPE html>
<html>
    <head>
         <script src="http://pjax.heroku.com/jquery.js"></script>
         <script src="http://pjax.heroku.com/jquery.pjax.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $(document).pjax('a', '#pjax-container')
            });
        </script>

    </head>
    <body>

      <h1>My Site</h1>

      <div class="container" id="pjax-container">
        Go to <a href="./next.html">next page</a>.
      </div>

    </body>
</html>

这是next.html

<p>next page</p>

当我点击“下一页”链接时，我只是转到next.html，我在屏幕上看到的唯一内容是“下一页”段落，就像我完全禁用pjax一样。

我缺少什么？

Answer 1

您是否阅读了整个示例页面？因为我会认为你没有，因为你没有在OP中提到它。

更具体地说，它说：

魔术！几乎。您仍然需要配置服务器以查找pjax请求并发回特定于pjax的内容。

pjax ajax请求发送一个X-PJAX头，所以在这个例子中（在大多数情况下）我们只想返回页面的内容，而没有任何布局用于带有该头的任何请求。

对我而言pjax似乎并不那么容易使用。您需要处理X-PJAX标题的发送。

更新：我已经在您的网站上测试了以下代码（使用Firefox控制台），它正在运行：

$(document).ready(function() {
    $("#pjax-container a").pjax(
        {
            container: "#pjax-container",
            timeout: 5000
        }
    );
});

请注意以下事项：

我重新构建了代码，使其更符合jQuery，不确定是否存在问题。现在做的是以下几点：
- 在选择器$("#pjax-container a")上，它使用pjax()函数。
- 它将容器#pjax-container作为替换目标。
此外，我添加了timeout: 5000，因为我已经读过pjax最初的timeout设置非常低，因此无法在慢速网络服务器上运行。

另一方面注意：我注意到pjax也将window.location.href更新为新网址，如果您想要此行为，请自行决定。

Answer 2

代码中的语法错误：

<script type="text/javascript">
$(document).ready(function(){
$(document).pjax('a', '#pjax-container')
})

更改为：

<script type="text/javascript">
$(document).ready(function(){
$(document).pjax('a', '#pjax-container')
});

无法获得基本的pjax示例

2 个答案: