Question

我正在HTML网站上实现jQuery PJAX，但无法正常工作。我注意到容器外部的区域正在刷新。

我有2页： 1. a.html 2. b.html

A.html页面代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"
            integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
            crossorigin="anonymous"></script>
    <script src="pjax/jquery.pjax.js"></script>
    <script>
        $(function () {
            // pjax
            $(document).pjax('ul a', '#main')
        })
    </script>
</head>
<body>
    Page A
    <div id="main">
        <ul>
            <li><a href="a.html">a</a></li>
            <li><a href="b.html">b</a></li>
        </ul>
    </div>
</body>
</html>

请注意，容器外部的文本为“页面A”

B.html页面代码为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"
            integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
            crossorigin="anonymous"></script>
    <script src="pjax/jquery.pjax.js"></script>
    <script>
        $(function () {
            // pjax
            $(document).pjax('ul a', '#main')
        })
    </script>
</head>
<body>
    Page B
    <div id="main">
        <ul>
            <li><a href="a.html">a</a></li>
            <li><a href="b.html">b</a></li>
        </ul>
    </div>
</body>
</html>

请注意，容器外部的文本为“页面B”

现在，我在浏览器中打开了 a.html 页面，然后点击了 b.html 链接。而且我发现该文本变为PageB。这意味着页面已刷新，因此jQuery pjax无法正常工作。

请参见以下视频，该视频说明了此问题：

我做错了什么？

Answer 1

我认为pjax可能无法正常工作，因为您的链接位于pjax容器div中。

因此该链接告诉pjax使用ajax将整个b.html文件全部加载到<div id='main'>中。

从pjax文档中：

pjax的工作原理是通过ajax从服务器获取HTML并替换页面上包含已加载HTML的容器元素的内容。然后，它使用pushState更新浏览器中的当前URL。

以some text中的html替换#main中的b.html并将URL更改为b.html的示例。

文件a.html

 <body>
 Page A
 <div>
   <ul>
     <li><a href="b.html">b</a></li>
   </ul>
 </div>

 <div id="main">
   some text
 </div>
 </body>

文件b.html ...

// b.html
<p>Replacement text from b.html</p>

Answer 2

你应该变成

<script type="text/javascript">
 $(document).pjax('a[use-pjax]', '#main');
</script>

如果您需要 pjax，只需在超链接中添加 'use-pjax：

<div id="main">
<ul>
  <li><a use-pjax href="b.html">a</a></li> /* using pjax */
  <li><a href="b.html>b</a></li> /* not using pjax */
</ul>

.... /* content u like to open */

</div>

以及“main”中的所有内容。希望这对我有帮助，这对我有用

jQuery PJAX插件在HTML网站中不起作用？

2 个答案: