使用jquery.pjax实现SPA单页面应用

前面我有文章介绍了前端路由和Pjax单页面应用方面的实例应用,今天我来和大家分享一个单页面应用神器jquery.pjax.js。它是基于jQuery的pjax插件,使用方便,功能完善。我会结合实例给大家讲解使用jquery.pjax.js。

在上一期文章中,我们了解了Pjax的实现原理,它就是利用了HTML5的Pushstate+ajax增强了页面局部刷新功能,它在我们原有的ajax功能上,实现了可以记录浏览历史,可以使用浏览器前进后退功能,浏览器的url可以跟随内容变化,而整个页面可以只刷新某一部分,也就是局部刷新。
今天我要给大家分享的这个实例是模拟分页功能,分页是在web开发中最常见的组件之一。正常情况下,点击分页组件中的页面,页面会跳转到对应的页面,而使用Pjax后,点击页码时,会发送一个ajax请求到后端,响应后更新对应的页面内容部分,同时地址栏url也对应实际的页码url,但整个页面并没有跳转,给我们的感觉是非常流畅,当然,我们也可以在请求页面异步时增加加载动画效果。来看具体的使用方法。

我们准备一个加载div#loading,默认隐藏,ajax请求的时候才显示。#container是用来加载响应的页面内容。.pagination是分页条组件。
<div class="row">
    <div id="loading">Loading...</div>
    <div id="container">jQuery.pjax分页</div>
    <nav>
      <ul class="pagination">
        <li><a href="data.php?p=1">1</a></li>
        <li><a href="data.php?p=2">2</a></li>
        <li><a href="data.php?p=3">3</a></li>
        <li><a href="data.php?p=4">4</a></li>
        <li><a href="data.php?p=5">5</a></li>
      </ul>
    </nav>
</div>

Javascript

我们使用的pjax组件依赖jQuery库,所以先将这两个文件加载。

<script src="jquery-2.0.0.min.js"></script>
<script src="jquery.pjax.js"></script>

然后,使用以下代码调用pjax插件。

$(document).pjax('.pagination a', '#container');
$(document).on('pjax:send', function() {
  $('#loading').show();
})
$(document).on('pjax:complete', function() {
  $('#loading').hide();
})

上面的代码中,我们告诉pjax监听一个标签和使用 #container 作为目标容器:
$(document).pjax('.pagination a', '#container');
现在在pjax兼容浏览器,点击分页条上的页码,网页的内容容器 #container 中的内容将被 data.php?p=x 的内容替换。
data.php的内容我们简单的写个代码,实际开发中应该是读取数据库中的数据列表。
$p = intval($_GET['p']);
if($p==0) $p=1;
echo '这是第'.$p.'页';
选项与事件
pjax的调用方法我们刚才简单介绍了,它还可以设置一些选项用来定制。格式如下:
$(document).pjax(selector, [container], options)
selector 是一个字符串,比如要点击的文本 event delegation.
container 是一个字符串,选择唯一标识pjax容器。
options 下面所描述的一个对象。

 

参数 描述 默认值
timeout Ajax超时毫秒之后完全强制刷新 650
push 使用 pushState 在导航中添加浏览器历史记录 true
replace 更换网址不添加浏览器历史记录 false
maxCacheLength 大缓存大小为以前的容器内容 20
version 一个字符串或函数返回当前pjax版  
scrollTo 垂直位置以滚动导航。为了避免改变滚动位置,通过设置为 false. 0
type 网页请求的方式 "GET"
dataType 返回的数据类型 "html"
container CSS选择器的元素,其中的内容应及时更换  
url 字符串或函数返回的URL ajax请求 link.href
target 最终 relatedTarget 的值,通过 pjax events link
fragment CSS选择器的碎片从Ajax响应提取  

 

事件方法

 

事件 描述
pjax:click 阻止一个链接的默认事件,防止阻止pjax事件
pjax:beforeSend 参见 XHR headers
pjax:start 请求开始
pjax:send 发送请求
pjax:clicked pjax后,已经得到了从点击一个链接开始
pjax:beforeReplace 在内容被替换前,HTML从服务器加载的内容
pjax:success 在内容被替换后,HTML 内容从服务器加载
pjax:timeout 在选项 options.timeout;之后除非取消,否则将很难刷新
pjax:error 一个ajax错误,将执行原始的网页刷新,直到网页加载被取消
pjax:complete 总是在pjax执行完成以后调用,不论运行的结果
pjax:end 请求结束
pjax:popstate 浏览器前进后退事件 direction 属性:”back”/”forward”

 

$.pjax还能响应点击事件,以及提交表单和重新加载事件。详情请参考jquery.pjax项目地

时间: 2024-10-29 13:32:07

使用jquery.pjax实现SPA单页面应用的相关文章

【技术干货】前端开发之jQuery单页面开发

本文作者:上海驻云Web前端工程师 著名2.5次元患者 黄志彪 (头像与真人一模一样) 一.前言   单页面开发在如今的WEB开发中占有绝对的优势,单页面应用可以提高用户体验度,可以实现跨平台应用开发.要实现单页面开发也有很多前端框架,比如:AngularJS,BackboneJS等等,这些都是很流行很全面的前端开发框架,它提供了网页模板,路径解析,API访问及Dom操作功能,但是有时候我们的需求比较简单,如果用这些大型前端框架那就显得有点重了.这里我介绍下自己使用Jquery实现单页面应用开发

前后端分离之Spring&amp;Vue单页面开发(2)

前言     需求: 最近本人在学习SpringBoot,希望自己能搭一个简单的Demo应用出来,但是搭到前端的时候遇到了困惑,因为网络上大部分教程前端都是应用模板引擎thymeleaf生成的,它给我的感觉就是一个进化版的JSP,但是很明显这种开发方式已经有些落后了.现在前端越来越工程化,Angular/Vue/React等框架非常流行,所以我希望搭建一个更符合技术进步方向的前端应用(我选择了相对容易入门的Vue).     问题: 在查阅资料过程,我发现SpringBoot和Vue相关的入门材

PushState+Ajax实现简单的单页面应用SPA例子

单页面应用(Single Page Application)简称SPA,使用SPA构建的应用优点有用户体验好.速度快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染,从而相对减轻了服务器压力,SPA在WEB移动端应用非常广泛. 我们在上一篇文章Javascript实现前端简单路由中提到的前端路由,可以在不刷新整个页面的情况下,通过变换地址栏的hash来实现页面局部加载. 今天我要给大家介绍的是使用HTML5的PushState+ajax实现不刷新整个页面,而地址栏变换,页面局部刷

从零开始学_JavaScript_系列(12)——jquery&amp;lt;2&amp;gt;(高度自适应,哈希地址及检测,单页面技术)

前注:我在练习的时候,函数命名比较随意,以修改起来简单的简短无意义函数名为主,实际使用时,请使用更易阅读.规范的命名方式 (ps:这篇算是上周的) (26)让某块随着浏览器的高度变化而自动变化 假设该块的标签名为section 于是: function ge() { var m =document.documentElement.clientHeight; $("section").css("height",m-100); } window.onresize = f

WebApi+Bootstrap+KnockoutJs打造单页面程序_javascript技巧

一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用,本专题将介绍如何使用WebApi+Bootstrap+KnockoutJs+Asp.net MVC来打造一个单页面Web程序.这种模式也是现在大多数公司实际项目中用到的. 二.SPA(单页面)好处在介绍具体的实现之前,我觉得有必要详细介绍了SPA.SPA,即Single Page Web Appl

jquery序列化form表单使用ajax提交后处理返回的json数据

 这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串:    代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;cha

jQuery实现form表单基于ajax无刷新提交方法详解_jquery

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

jQuery移动web开发之页面跳转和加载外部页面的实现_jquery

changePage() 页面跳转 jQuery.mobile.changePage( to [, options ] ) 从一个页面跳转到另一个页面,使用$.mobile对象的changePage方法来实现.但要使用此方式的时候,要以点击一个链接或者提交表单来实现.此方法有两个参数. to:是第一个参数,是必须的,不可缺少.类型:字符串或者对象. 字符串: 绝对或相对URL地址.如:("about/us.html") 对象: jquery选择器对象,如:($("#about

spring-java单页面应用和多页面应用的区别是什么?哪些网站做成单页面应用好,又有哪些网站做成多页面应用好?

问题描述 java单页面应用和多页面应用的区别是什么?哪些网站做成单页面应用好,又有哪些网站做成多页面应用好? 我现在工作做的网站是给企业和政府用的办公系统, 后台主要用了MySQL.SpringMVC.公司自研的jdbc框架: 前端用的是jquery.angularjs,requirejs: UI部门负责页面的设计及样式. 我们这做出来的都是一个只有index.html的单页面应用,不像我刚开始学的那样是由很多jsp页面相互之间跳转组成的应用. 这导致了一个问题:项目用了RESTful风格,后