通过pjax实现无刷新翻页(兼容新版jquery)


Posted in Javascript onJanuary 31, 2014

pushState是一个可以操作history的api,该api的介绍和使用请见这里:http://www.welefen.com/use-ajax-and-pushstate.html

目前已经有http://github.com/, http://plus.google.com, http://www.welefen.com 等网站已经使用。

pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。

同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。

并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。

关于pjax这里就不多介绍了,简单易用,轻松地实现部分刷新,告别链接带来的闪烁。
之前看过pjax并实现了demo,还写了篇笔记,不过jquery 1.9把live()方法删掉了,新版pjax也随之换了用on()方法实现,最近项目有用到,所以了解了新的使用方法,这里也做一个新的笔记。

环境:
jquery 1.10.2 下载
jquery.pjax.js 下载

使用方法:
监控所有class为pjaxlink的链接,采用pjax更新链接页面中id为ToInsert的容器内容到本页面中id为Content的容器中。若获取内容时间超过5秒,则直接跳转:

$(document).pjax('a.pjaxlink', '#Content', {fragment:'#ToInsert', timeout:5000});

使用实例:
原始页面是通过跳转的翻页,我在不改变页面内容的前提下,使用pjax监控翻页链接,仅更新列表(保证列表容器是分页容器的父节点)的内容。

if ($.support.pjax) {
    //遍历所有分页容器
    $('.pagercontainer').each(function(){
        //取得列表容器
        $listcontainer=$(this).parent();
        //取得列表容器的ID
        var listcontainerid=$listcontainer.attr('id');
        //用pjax监控所有分页链接并定义pjax来实现更新
        $(document).pjax('#'+listcontainerid+' .pagercontainer a', '#'+listcontainerid, {fragment:'#'+listcontainerid, timeout:5000});
    });
    $(document).on('pjax:send', function() {
        //在pjax发送请求时,显示loading动画层
        $('#loading').show();
    });
    $(document).on('pjax:complete', function() {
        //在pjax处理完成后,隐藏loading动画层
        //由于速度太快会导到loading层闪烁,影响体验,所以在此加上500毫秒延迟
        setTimeout(function(){$('#loading').hide()},500);
    });
}
Javascript 相关文章推荐
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
vue params、query传参使用详解
Sep 12 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jquery 页面滚动到底部自动加载插件集合
Jan 31 #Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 #Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 #Javascript
js实现俄罗斯方块小游戏分享
Jan 31 #Javascript
获取select元素被选中的文本内容的js代码
Jan 29 #Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 #Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 #Javascript
You might like
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
Z-Blog中用到的js代码
2007/03/15 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python中文编码问题小结
2014/09/28 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
详解重置Django migration的常见方式
2019/02/15 Python
对Python3 序列解包详解
2019/02/16 Python
python如何判断IP地址合法性
2020/04/05 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
交通事故协议书范文
2014/10/23 职场文书
给客户的检讨书
2014/12/21 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis