jQuery+pjax简单示例汇总

下面给出“jQuery+pjax简单示例汇总”的完整攻略。

1. 什么是jQuery+pjax

PJAX （pushState + Ajax) 是基于 HTML5 的新特性 pushState，使得我们可以通过 Ajax 获取页面的片段，再通过 pushState 实现 URL 的改变，这样就能使用浏览器的前进、后退等导航功能，同时还能让网页加载更快。

而 jQuery+pjax 利用了 jQuery 的优势，将 PJAX 进行了封装，使得使用起来更为简单。我们只需要引入 jQuery 和 jQuery+pjax，就可以通过简单的配置实现 PJAX 的功能。

2. 示例说明

2.1 案例一

本示例演示如何使用 jQuery+pjax 实现无刷新页面的局部更新。

我们准备了两个页面，一个是首页（index.html），另一个是文章页面（article.html）。

index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery+pjax</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="../jquery.pjax.js"></script>
</head>
<body>
  <ul>
    <li><a href="./index.html">首页</a></li>
    <li><a href="./article.html">文章</a></li>
  </ul>

  <div id="container">
    <h2>欢迎来到 jQuery+pjax 的示例页面</h2>
  </div>

  <script>
    $(document).pjax('a', '#container');
  </script>
</body>
</html>

article.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery+pjax</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="../jquery.pjax.js"></script>
</head>
<body>
  <ul>
    <li><a href="./index.html">首页</a></li>
    <li><a href="./article.html">文章</a></li>
  </ul>

  <div id="container">
    <h2>这是文章页面</h2>
    <p>文章内容！！！</p>
  </div>

  <script>
    $(document).pjax('a', '#container');
  </script>
</body>
</html>

我们在 head 部分引入了 jQuery 和 jQuery+pjax，然后在 body 部分定义了两个页面的链接，分别对应着首页和文章页面。

接着，我们使用 jQuery+pjax 的 API pjax() 对页面上的所有链接进行绑定，绑定后所有链接就都支持 PJAX 了。

上述代码的规则如下：

$(document).pjax('a', '#container')：表示在整个页面中寻找所有的 <a> 标签，并且在点击这些链接时，使用 PJAX 技术，将加载的内容刷新到 #container 容器中。

2.2 案例二

本示例演示如何使用 jQuery+pjax 实现无刷新页面的页面跳转。

我们准备了两个页面，一个是首页（index.html），另一个是文章页面（article.html）。

index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery+pjax</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="../jquery.pjax.js"></script>
</head>
<body>
  <ul>
    <li><a href="./index.html">首页</a></li>
    <li><a href="./article.html">文章</a></li>
  </ul>

  <div id="container">
    <h2>欢迎来到 jQuery+pjax 的示例页面</h2>
    <p>如果你想要跳转到文章页面，请点击下面的链接：</p>
    <a href="./article.html" data-pjax="container">去看看文章</a>
  </div>

  <script>
    $(document).pjax('a[data-pjax]', '#container');
  </script>
</body>
</html>

article.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery+pjax</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="../jquery.pjax.js"></script>
</head>
<body>
  <ul>
    <li><a href="./index.html">首页</a></li>
    <li><a href="./article.html">文章</a></li>
  </ul>

  <div id="container">
    <h2>这是文章页面</h2>
    <p>文章内容！！！</p>
  </div>

  <script>
    $(document).pjax('a[data-pjax]', '#container');
  </script>
</body>
</html>

我们同样在 head 部分引入了 jQuery 和 jQuery+pjax，然后定义了两个页面的链接，分别对应着首页和文章页面。

这次我们在首页中定义了一个链接（<a href="./article.html" data-pjax="container">去看看文章</a>），并在其中添加了自定义属性 data-pjax="container"，表示该链接使用 PJAX 技术，并将加载的内容刷新到 #container 容器中。

接着，我们同样使用 jQuery+pjax 的 API pjax() 对页面上的所有自定义属性为 data-pjax 的链接进行绑定。