什么是pjax?

当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新。这样的用户体验,比起整个页面都闪一下来说, 好很多。 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。 那么如果我们想要实现这样的功能, 我们如何做呢? 我发现pjax提供了一个脚本支持这样的功能。 pjax项目地址在 https://github.com/defunkt/jquery-pjax 。 实际的效果见: http://pjax.heroku.com/ 没有勾选pjax的时候, 点击链接是跳转的。 勾选了之后, 链接都是变成了ajax刷新。

pjax可以实现局部刷新,和ajax的区别是,pjax的局部刷新,浏览器地址栏的网址会变化。
这个jquery.pjax.min.js是国外大神写的jquery开源的pjax通用封装插件,此外网上很多以上封装的教程都没有加上form事件,这个代码还可以解决博客的搜索和评论问题。

怎样使用pjax

先添加必要文件:

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>

然后在js代码中写如下代码:

$(function(){
//页面主体内容支持pjax
$(document).pjax('a', '#container', {
//这是a标签的pjax。#container 表示执行pjax后会发生变化的id,改成你主题的内容主体id或class。timeout是pjax响应时间限制,如果在设定时间内未响应就执行页面转跳,可自由设置。
fragment:'#container', timeout:1500
});
//支持表单提交事件无刷新
$(document).on('submit', 'form', function (event) {
//这是提交表单的pjax。form表示所有的提交表单都会执行pjax,比如搜索和提交评论,可自行修改改成你想要执行pjax的form id或class。#container 同上改成你主题的内容主体id或class。
$.pjax.submit(event, '#container', {
fragment:'#container', timeout:6000
});
});
//执行pjax开始,在这里添加要重载的代码,可自行添加loading动画代码。例如你已调用了NProgress,在这里添加
$(document).on('pjax:send', function() {
$('body').append('<div class="loading"></div>');
$('.main').fadeTo(200,0.0);
});
//执行pjax结束,在这里添加要重载的代码,可自行添加loading动画结束或隐藏代码。例如NProgress的结束代码
$(document).on('pjax:complete', function() {
$('.loading').remove();
$('.main').fadeTo(500,1);
});
});

由于网上很多教程里面都没有表单提交,评论搜索不支持pjax,因此本人在网上收集了资料整理一篇比较完整的文章供大家参考。
部分文字来源:
http://www.codesec.net/view/195662.html
http://bbs.emlog.net/forum.php?mod=viewthread&tid=40681 在此感谢!!

Pjax无刷新跳转页面实现,支持超链接与表单提交的更多相关文章

  1. 黄聪:Pjax无刷新跳转页面实现,支持超链接与表单提交

    什么是pjax? 当你点击一个站内的链接的时候,不是做页面跳转,而是只是站内页面刷新.这样的用户体验,比起整个页面都闪一下来说, 好很多. 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏 ...

  2. 利用HTML5的History API实现无刷新跳转页面初探

    HTML4中的History API history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下: 属性 length 历史的项数.Jav ...

  3. Html表单提交到Servlet输出到页面乱码

    Html使用的编码是UTF-8编码显示页面,之后使用form表单提交字段到Servlet中,Servlet将利用getParamer方法获得form提交的字段,之后通过Respone中的writer将 ...

  4. 有趣的API: history pushState/popstate 无刷新跳转(pjax)

    API介绍 首先看看API如何使用: history.pushState(state, title, url) : 无刷新的向浏览器 历史最前方 加入一条记录. state(any) 需要保存的数据, ...

  5. 利用history实现无刷新跳转界面

    看标题是不是感觉很拽的样子,其实没什么啦,也就是时下常说的单页面应用.这种web形式在如今的移动端十分流行,毕竟在移动端频繁得去刷新界面不是很友好,而且还费流量.今天我们要做一个小的app(移动端), ...

  6. 话说Form标签的target属性-----无刷新表单提交

    国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直 ...

  7. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  8. 不使用Ajax,如何实现表单提交不刷新页面

    不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...

  9. js实现无刷新表单提交文件,将ajax请求转换为form请求方法

    最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...

随机推荐

  1. 【Codeforces Global Round 1 C】Meaningless Operations

    [链接] 我是链接,点我呀:) [题意] 给你一个a 让你从1..a-1的范围中选择一个b 使得gcd(a^b,a&b)的值最大 [题解] 显然如果a的二进制中有0的话. 那么我们就让选择的b ...

  2. C/C++中的64位整数

    C/C++中的64位整数(__int64 and long long) 在做ACM题时,经常都会遇到一些比较大的整数.而常用的内置整数类型常常显得太小了:其中long 和 int 范围是[-2^31, ...

  3. 相同的雪花 Hash

    相同的雪花 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 You may have heard that no two snowflakes are alike. ...

  4. SpringBoot多数据源改造(二)

    在上一篇的内容中,主要介绍了spring boot项目的多数据源改造的涉及的基本配置及改动.在spring项目中,常用Mybatis做ORM操作数据库,并且分页操作是避免不了的. 因此,这一篇主要介绍 ...

  5. java中静态资源处理方法

    方案一:激活Tomcat的defaultServlet来处理静态文件 在 web.xml 中添加: <servlet-mapping> <servlet-name>defaul ...

  6. 用于改善质量、稳定性和多样性的可增长式GAN

    用于改善质量.稳定性和多样性的可增长式GAN GANs NVIDIA Fly real or fake ? real or fake ? 1024 x 1024 images generated us ...

  7. nginx access 日志位置

    nginx access 日志位置 /var/log/nginx tail -f access.log

  8. Eclipse ADT 导入别的电脑开发的项目

    用Eclipse开发的时候常常要导入别的电脑开发的项目,常常会出错,甚至导入不了. 方法一: 把你正在使用的Eclipse开发的随便一个项目.打开,把下图这三个文件复制过去你要导入的项目.覆盖.然后再 ...

  9. json、js数组真心不是想得那么简单

    之前因为做前台的东西比較少,对于json和js数组的认识仅局限于一种固定格式.这样的固定的思维在开发前台时,特别是近期使用highcharts插件时.让我感到特别不明确.通过查询最终心头的疙瘩解开了. ...

  10. 黑马程序猿——————java基础

    一.软件开发 软件是什么? 软件是简单的来说,计算机数据和指令的集合,数据(比方年龄,性别).指令及时告诉计算机怎样对他进行处理.计算机但是没有人那么聪明啊! 二.图形化界面(GUI),主要特点就是. ...