通过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处理json与ajax返回JSON实例代码
Jan 03 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
原生js实现随机点名功能
Nov 05 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
JS实现简单打字测试
Jun 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python做简单的字符串匹配详解
2017/03/21 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python让列表倒序输出的实例
2018/06/25 Python
Django实现学生管理系统
2019/02/26 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python文件读取失败怎么处理
2020/06/23 Python
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
食品业务员岗位职责
2014/03/18 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
硕士生找工作求职信
2014/07/05 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL