pjax的工作原理是通过请求从服务器端获取HTML数据，然后将获取到的HTML数据替换指定容器元素中的内容。然后使用pushState技术更新浏览器地址栏中的当前地址。

例如需要从页面1跳转到页面2，改造成pjax之后。

1. 发起页1和目标页2，显示区域A和B设置同一个元素id
2. 在页面1发起请求页面2内容，然后提取请求返回的页面2数据中的元素B，替换页面1的A区域
3. 页面仅指定的同一个id的页面元素刷新，直接替换内容，不会跳转页面。

作用

好处就是页面局部刷新，加载会更快，并且页面没刷新，所以比如页面音乐播放，特效等比较连续，但是改造需要指定要替换的区域id，比较麻烦

开始

1、设置替换的元素id

正如上面示例图，需要设置发起页和目标页的替换id，大部分都是在首页index.php，文章列表的那个div为止，设置id="pjax-container"，在文章post.php，文章显示区域的div，也设置id="pjax-container"

2、引入Jquery和PJAX

编辑footer.php或者header.php，引入js文件

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

pjax1.9.6版本应配合Jquery2.x版本使用，如果要使用jq3.x版本，使用pjax2.0.1以上版本

3、引用加载动画（可选，更好看）

<link rel='stylesheet' href='https://unpkg.com/nprogress@0.2.0/nprogress.css'/>
<script src='//unpkg.com/nprogress@0.2.0/nprogress.js'></script>

4、加载pjax

在引入Jquery和PJAX代码下面，增加以下代码

<script>
//pjax 刷新
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
}).on('pjax:send', function() {
        NProgress.start();//加载动画效果开始
}).on('pjax:complete', function() {
    NProgress.done();//加载动画效果结束
});

</script>

版权属于：东哥笔记 - DongGe.org

本文链接：https://dongge.org/blog/1362.html

自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！