如何将Pjax整合进网站,实现全站无刷新加载?
2018-02-08 17:45
1251 查看
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入HTML网页,带给你超快速的浏览器体验,而且有固定链接、标题以及后退按钮都是有效的。
由于这款插件依赖于jquery,又依赖jq去操作pushState,所以必须下载1.7版本以上的JQ哦!
本页面所有a链接默认用pjax请求数据,请求的数据放入id为pjax-container中。ps:如果前台模板有模板继承,直接写入父类即可。
后台程序、这里用php程序示范:
首先判断是pjax请求还是正常的请求,可以封装成一个方法(方法很多~我只做个示范):
然后控制器根据是否pjax返回不同的数据:
这里用laravel的方法展示了下,TP中是$this->display()这里不再赘述。
好了,此时大功告成!
解决问题
问题:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以JQ等绑定的事件无效。如多说评论框无法正常使用。
解决:用pjax的加载完成后的回调函数再次绑定即可!
pjax.js提供了两个api:
好了,关于pjax的教程就告一段落了~有不懂的可以私下问我~
pjax工作原理
用大白话来说,就是ajax的升级版--可以动态记录历史记录的ajax技术。我们之前用ajax来做无刷新分页,一个最大的不足之处就是无法通过uri来标识这个资源以及历史记录倒退问题,通过利用html5 pushState的api,我们可以轻松达到发送ajax请求的同时,动态的记录状态,这就是pjax!准备工作
pjax是嘛玩意我们懂了之后,就要开始用它了!但是我们要写一套复杂的js去pushState么?答案是不需要的,已经有人封装好了JqueryPjax插件,我们只需用人家写好的插件即可。由于这款插件依赖于jquery,又依赖jq去操作pushState,所以必须下载1.7版本以上的JQ哦!
开始使用
模板中:后台程序、这里用php程序示范:
首先判断是pjax请求还是正常的请求,可以封装成一个方法(方法很多~我只做个示范):
if ( $this ->is_pjax()){ |
好了,此时大功告成!
解决问题
问题:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以JQ等绑定的事件无效。如多说评论框无法正常使用。解决:用pjax的加载完成后的回调函数再次绑定即可!
进一步优化
过渡动画效果:pjax.js提供了两个api:
pjax与百度编辑器代码高亮
使用pjax后,百度编辑器的代码高亮是没效果的,在回调中使用SyntaxHighlighter.all()是没任何效果的,我们只需在回调函数里调用下SyntaxHighlighter.highlight()即可!好了,关于pjax的教程就告一段落了~有不懂的可以私下问我~
相关文章推荐
- 如何将Pjax整合进网站,实现全站无刷新加载?
- 使用Yii整合的pjax(pushstate+ajax)实现无刷新加载页面
- pjax:ajax和pushState结合的js库——实现网站无刷新加载页面
- iOS图片验证码使用SDWeb实现的加载如何实现清理缓存点击刷新
- Android界面实现 整合了刷新、加载更多、滑动删除功能的XListview
- 【Android界面实现】整合了刷新、加载更多、滑动删除功能的XListview
- 【Android界面实现】整合了刷新、加载更多、滑动删除功能的XListview
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
- Codeigniter整合PJAX(pushstate+ajax)实现无刷新页面
- 关于jquery.lazyload.min.js+ajax实现分页图片预加载,如何只刷新新添加的内容
- 在 Laravel 5 中集成 Pjax 实现无刷新加载页面的扩展包 —— Laravel Pjax
- PJAX实现页面无刷新跳转及加载数据(浏览器可回退前进)
- 【Android界面实现】整合了刷新、加载更多、滑动删除功能的XListview
- 如何在无刷新页面的情况下实现客户端回调实例(C#)—MSDN学习笔记
- 如何实现网站内容页的移动菜单效果?
- 如何实现像商城网站上的商业行业分类的效果
- 如何实现ASP.NET网站个性化
- 打开网站从右下角缓缓升起的小窗口如何实现?
- 如何在无刷新页面的情况下实现客户端回调实例(C#)—MSDN学习笔记