通过pjax实现无刷新翻页(兼容新版jquery)

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);
    });
}

赞 (0)

相关推荐

  • 在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析

    在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析

    当我用defunkt/jquery-pjax载入Yii2的ActiveForm时发生一个错误,正常情况下是 ActiveForm的两个js应该先载入,而实际情况是 typeError:JQuery(...).yiiActiveForm is not a function. 在github的issues对这个问题已经讨论并得到了解决. Pjax首先通过html()执行内联的<script>,然后才通过executeScriptTags()执行带着src的<script>,所以导致找不

  • 使用pjax实现无刷新更改页面url

    我们都知道ajax给浏览器带来了异步加载的能力,在数据校验.局部刷新等方面提升了用户体验,但同时存在如下问题: 1. 可以无刷新改变页面内容,但无法改变页面URL 2. hash的方式不能很好的处理浏览器的前进.后退等问题 为了解决传统ajax带来的问题,HTML5里加强了history API,加入了pushState.replaceState接口和popstate事件.这里就不详细介绍了,没有这方面知识的同学建议先看一下相关的资料. pjax插件封装了pushState和ajax操作,为我们

  • jQuery+pjax简单示例汇总

    pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮. ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中.pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏,这样用户就能愉快地使用前进后退了.pjax有好几个实现方法,这里使用最常用的jQuery库,使用jquery.pjax.js.演示代码的服务器端使用PHP脚

  • 使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

    使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

    Pjax是啥? Pjax = history.pushState + Ajax = history.pushState + Async JS + XML(xhr?) BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副作用(页面不会跳转刷新) PJAX效果 通过url可以跟踪ajax的动态加载内容.这种

  • 通过pjax实现无刷新翻页(兼容新版jquery)

    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技术. 同时支持了缓存和本地存储,下次访问的时候直接读取本地

  • C#使用WebService结合jQuery实现无刷新翻页的方法

    本文实例讲述了C#使用WebService结合jQuery实现无刷新翻页的方法.分享给大家供大家参考.具体如下: 1. 首先创建数据库.表Article,字段ArticleId,Title 前台代码 <%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • asp.net 无刷新翻页就是这么简单

    个人喜欢用Repeater,因其简洁,此AjaxPager定向为Repeater! 一步一步看来: 代码 复制代码 代码如下: [DefaultProperty("TotalRecord"), ToolboxData("<{0}:AjaxPager runat=server></{0}:AjaxPager>")] public class AjaxPager : WebControl,ICallbackEventHandler { publi

  • asp.net jquery无刷新分页插件(jquery.pagination.js)

    asp.net jquery无刷新分页插件(jquery.pagination.js)

    采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表  2.页面内容: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

  • Bootstrap实现翻页效果

    Bootstrap实现翻页效果

    Bootstrap之翻页. 优点: 支持局部刷新: 只要是列表,都可以加载该组件: 支持动态数据绑定: 当然还有绝对的简单实用. 效果图 最后一页时: 最开始一页时: 实现 ①.翻页组件的布局 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ include file="/componen

  • jQuery+PHP发布的内容进行无刷新分页（Fckeditor）

    jQuery+PHP发布的内容进行无刷新分页（Fckeditor）

    这篇文章将使用jQuery,并结合PHP,将Fckeditor发布的内容进行分页,并且实现无刷新切换页面.  本文假设你是WEB开发人员,掌握了jQuery和PHP相关知识,并且熟知Fckeditor的配置和使用. Fckeditor编辑器有一个插入分页符的功能按钮,点击该按钮,将会在内容区插入一条分页符,如下图红色框标注: 分页符对应生成的html代码是: <div style="page-break-after: always"><span style="

  • asp.net实现文件无刷新上传方法汇总

    asp.net实现文件无刷新上传方法汇总

    遇到上传文件的问题,结合之前用到过的swfUpload,又找了一个无刷新上传文件的jquery插件uploadify,写篇博客记录一下分别介绍这两个的实现方法 swfUpload 导入swfUpload的开发包 添加js引用,引用swfUpload.js与handler.js文件,如果对swfUpload不了解.有疑问可以看看这篇文章页面初始化 修改handler.js文件中 上传成功的事件,serverData是服务器端的响应 Uploadify 导入uploadify开发包,从官网下载,官网

  • 基于ajax实现点击加载更多无刷新载入到本页

    基于ajax实现点击加载更多无刷新载入到本页

    先给大家展示效果图: 效果演示 本例是分页的另外一种显示方式,并不是隐藏未显示的内容 数据库结构与<ajax 翻页>是一样的 JavaScript 代码 <script type="text/javascript"> $(document).ready(function() { var track_click = ; //track user click on "load more" button, righ now it is click

随机推荐