通过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 相关文章推荐
json的前台操作和后台操作实现代码
Jan 20 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 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 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
微信支付的开发流程详解
2016/09/13 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
JS实现“全选”和"全不选"功能代码实例
2020/02/06 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
python 实现敏感词过滤的方法
2019/01/21 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
赔偿协议书范本
2014/04/15 职场文书
国庆促销活动总结
2014/08/29 职场文书
简单的辞职信模板
2015/05/12 职场文书
小数乘法教学反思
2016/02/22 职场文书