Pjax无刷新加载页面基础示例

前言

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


运行原理

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

方法

第一步

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

第二步

在body之前插入以下代码


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


第三步

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

代码展示

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

index.php



index2.php



后记

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


本博客所有文章如无特别注明均为原创。作者:小天复制或转载请以超链接形式注明转自 小天之家
原文地址《Pjax无刷新加载页面基础示例
分享到:更多

相关推荐

  • blogger

网友评论(0)