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

前言

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

运行原理

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

为了方便理解,我绘制了一个草图(画的不好,不喜勿喷)

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

方法

第一步

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

第二步

在body之前插入以下代码

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

第三步

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

代码展示

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

index.php

index2.php

后记

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

发表评论

请在下方填写评论信息

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

表情 粗体 斜体 图片 引用 链接 删除线 下划线 插代码 签到

目前评论:31   其中:访客  29   博主  2

  1. avatar 风神博客 1  来自天朝的朋友 搜狗浏览器 Windows 10 河南省平顶山市 中国平煤神马集团

    写的不错,懂了

  2. avatar Koolight 5  来自天朝的朋友 谷歌浏览器 Windows 7 浙江省绍兴市 电信

    这个可以移植到begin这种CMS主题吗?

  3. avatar 堆爱博客 1  来自天朝的朋友 Netscape Navigator iPhone iPhone OS 9_3 like Mac OS X) AppleWebKit 贵州省铜仁地区 电信

    如何给博主名字后面加上博主两个字?

    • avatar 憧憬Licoy 博主  来自天朝的朋友 谷歌浏览器 Windows 10 浙江省杭州市 移动

      @堆爱博客 在functions.php搜索“博主”,找到匹配项添加上就可以了

  4. avatar Koolight 5  来自天朝的朋友 火狐浏览器 Windows 7 湖北省武汉市 鹏博士长城宽带

    现在都流行全站PJAX,看起来很快的样子。

    • avatar 憧憬Licoy 博主  来自天朝的朋友 谷歌浏览器 Windows 10 浙江省杭州市 移动

      @Koolight 是的,因为会减少很多的HTTP请求,所以速度就有明显的提升。