通过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 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
JavaScript多线程的实现方法
May 08 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
node中使用shell脚本的方法步骤
Mar 23 Javascript
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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
PHP 模板高级篇总结
2006/12/21 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
10 个经典PHP函数
2013/10/17 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
军训教官感言
2014/03/02 职场文书
银行办公室岗位职责
2014/03/10 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
亮剑观后感300字
2015/06/05 职场文书
新闻稿件写作范文
2015/07/18 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL