通过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 构造函数 面相对象学习必备知识
Jun 09 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
js取模(求余数)隔行变色
May 15 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
Javascript中replace()小结
Sep 30 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
JS实现鼠标按下拖拽效果
Jul 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
PHP 中关于ord($str)>0x80的详细说明
2012/09/23 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Python 爬虫性能相关总结
2020/08/03 Python
python 代码运行时间获取方式详解
2020/09/18 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
物流管理毕业生自荐信
2013/10/24 职场文书
三严三实对照检查材料
2014/08/25 职场文书
成绩报告单家长评语
2014/12/30 职场文书
个人培训总结
2015/03/05 职场文书
民事诉讼代理词
2015/05/25 职场文书
php 原生分页
2021/04/01 PHP