jQuery PJAX 插件无法在 HTML 网站上运行？

Question

我正在 HTML 网站上实施 jQuery PJAX，但它不起作用。我注意到容器外的区域正在刷新。

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

A.html page code is:

<!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>

注意容器外的文字是'Page A'

B.html page code is:

<!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>

注意容器外的文字是'Page B'

现在，我在浏览器中打开 a.html 页面，然后点击 b.html link .而且我发现文本变成了页面B。这意味着页面已刷新，因此jQuery pjax 不起作用。

请参阅下面说明此问题的视频：

我做错了什么？

Answer 1

我认为 pjax 可能无法正常工作，因为您的 links 在 pjax 容器中 div。

所以 link 告诉 pjax 使用 ajax 将所有整个 b.html 文件加载到 <div id='main'>.

来自 pjax 文档：

pjax works by fetching HTML from your server via ajax and replacing the content of a container element on your page with the loaded HTML. It then updates the current URL in the browser using pushState.

将#main中的some text替换为b.html中的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 网站上运行？

jQuery PJAX plugin not working in HTML website?

html

javascript

ajax

jquery

pjax