前言
今天浏览了一些精美的前端页面,然后看见有些页面运用了 Pjax,让整个页面加载很快。之前很久就想去看看 Pjax 是怎么实现的了,今天就去了解了一下,然后懂得了他的运行原理。下面就来分享一下。
运行原理
在两个不同的页面,把内容放在同一个容器当中,然后绑定本页的所有 a 标签,然后替换旧的容器的内容为新的内容。[v_tips] 为了方便理解,我绘制了一个草图(画的不好,不喜勿喷)[/v_tips]
方法
第一步
首先在页面引入 Jquery1.7 以上的版本以及 pjax.js
第二步
在 body 之前插入以下代码
这句话是绑定本页面所有 a 标签,当链接被点击时,替换 #content 容器的内容为新的#content 容器的内容,ajax 超时时间为 8 秒;
第三步
完成以上两步就可以执行 pjax 页面替换了,如果还想再加载的时候显示 Loading 页面等等,自己就 CSS 美化一下等等,这个我就不多说了。
代码展示
如果想更好的理解,就看看下面的代码,看了下面的代码你就懂了。
index.php
页面一
index2.php
页面二
后记
[v_tips] 从以前的认为 Ajax 很难,到现在 Pjax 都会了。所以说:人只要去学没有学不会的,只有看你自己愿意去研究不,看自己愿意去付出不,即使你再聪明,一个懒足矣把你毁掉!奋斗吧,少年! [/v_tips]
写的不错,懂了
@风神博客
这个可以移植到begin这种CMS主题吗?
@Koolight 没有试过呢..
如何给博主名字后面加上博主两个字?
@堆爱博客 在functions.php搜索“博主”,找到匹配项添加上就可以了
现在都流行全站PJAX,看起来很快的样子。
@Koolight 是的,因为会减少很多的HTTP请求,所以速度就有明显的提升。
« 1 2
Chatroulette-全世界随机视频聊天网站
SpringCloud使用Zuul出现“Forwarding error”错误解决方法
Puock主题常见问题汇总
IntelliJ IDEA下将JavaWeb打包成war包并发布到tomcat步骤说明
LiRecord留言板系统V2.0正式版发布
Puock主题常见问题汇总
由开源项目gogo-protobuf寻找新组织接手引发的思考
Sa-Token实现注解模式的匿名访问
在浏览器端离线给证件照加水印
岛屿数量计算中的DFS和BFS的应用