通过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 相关文章推荐
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 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将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
修复IE9&safari 的sort方法
2011/10/21 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
js实现图片360度旋转
2017/01/22 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
Postman内建变量常用方法实例解析
2020/07/28 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
用Python编程实现语音控制电脑
2014/04/01 Python
Django中处理出错页面的方法
2015/07/15 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
说一说Python logging
2016/04/15 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python中的json总结
2018/10/11 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
最新最全的手机号验证正则表达式
2022/02/24 Javascript
MySQL学习之基础命令实操总结
2022/03/19 MySQL
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js