通过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 相关文章推荐
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
Vue前端开发规范整理(推荐)
Apr 23 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
何时使用Map来代替普通的JS对象
Apr 29 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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
php mssql 时间格式问题
2009/01/13 PHP
PHP中读写文件实现代码
2011/10/20 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
jQuery 1.0.2
2006/10/11 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python读写unicode文件的方法
2015/07/10 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
python实现C4.5决策树算法
2018/08/29 Python
python如何统计代码运行的时长
2019/07/24 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
服务质量承诺书
2014/03/27 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Java实现多线程聊天室
2021/06/26 Java/Android