pjax php demo,Pjax无刷新加载页面基础示例

前言

今天浏览了一些精美的前端页面，然后看见有些页面运用了Pjax，让整个页面加载很快。之前很久就想去看看Pjax是怎么实现的了，今天就去了解了一下，然后懂得了他的运行原理。下面就来分享一下。

运行原理

在两个不同的页面，把内容放在同一个容器当中，然后绑定本页的所有a标签，然后替换旧的容器的内容为新的内容。

[v_tips]为了方便理解，我绘制了一个草图(画的不好，不喜勿喷)[/v_tips]

/>

方法

第一步

首先在页面引入Jquery1.7以上的版本以及pjax.js

第二步

在body之前插入以下代码

$(document).pjax('a', '#content', {fragment:'#content', timeout:8000});

这句话是绑定本页面所有a标签，当链接被点击时，替换#content容器的内容为新的#content容器的内容，ajax超时时间为8秒；

第三步

完成以上两步就可以执行pjax页面替换了，如果还想再加载的时候显示Loading页面等等，自己就CSS美化一下等等，这个我就不多说了。

代码展示

如果想更好的理解，就看看下面的代码，看了下面的代码你就懂了。

index.php

页面一

$(document).pjax('a', '#content', {fragment:'#content', timeout:8000});

这是第一个页面的文本

---

到第二个页面

---

index2.php

页面二

$(document).pjax('a', '#content', {fragment:'#content', timeout:8000});

这是第二个页面的文本

---

到第一个页面

---

后记

[v_tips]从以前的认为Ajax很难，到现在Pjax都会了。所以说：人只要去学没有学不会的，只有看你自己愿意去研究不，看自己愿意去付出不，即使你再聪明，一个懒足矣把你毁掉！奋斗吧，少年！ [/v_tips]