通过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 关于# 和 void的区别分析
Oct 26 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
Vue组件中slot的用法
Jan 30 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
Vue SSR 即时编译技术的实现
May 06 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实现rc4加密算法代码
2012/04/25 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
js简易版购物车功能
2017/06/17 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
举例讲解Python常用模块
2019/03/08 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
医务工作者先进事迹材料
2014/01/26 职场文书
英语系毕业生求职信
2014/07/13 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python