zoukankan      html  css  js  c++  java
  • 使用jquery.pjax实现SPA单页面应用

    http://www.helloweba.com/view-blog-387.html

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

    在上一期文章中,我们了解了Pjax的实现原理,它就是利用了HTML5的Pushstate+ajax增强了页面局部刷新功能,它在我们原有的ajax功能上,实现了可以记录浏览历史,可以使用浏览器前进后退功能,浏览器的url可以跟随内容变化,而整个页面可以只刷新某一部分,也就是局部刷新。

    今天我要给大家分享的这个实例是模拟分页功能,分页是在web开发中最常见的组件之一。正常情况下,点击分页组件中的页面,页面会跳转到对应的页面,而使用Pjax后,点击页码时,会发送一个ajax请求到后端,响应后更新对应的页面内容部分,同时地址栏url也对应实际的页码url,但整个页面并没有跳转,给我们的感觉是非常流畅,当然,我们也可以在请求页面异步时增加加载动画效果。来看具体的使用方法。

    HTML

    我们准备一个加载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项目地址:https://github.com/defunkt/jquery-pjax

  • 相关阅读:
    Javascript学习笔记3 Javascript与BOM简介
    Javascript学习笔记2.3 Javascript与DOM实现动态表格效果
    Javascript学习笔记2.2 Javascript与DOM选项卡(滑动门)案例详解
    javascript是做什么的
    Javascript学习笔记2.1 Javascript与DOM简介
    Javascript学习笔记1 javascript的特点
    CSS3新增的选择器和属性
    DNSlog实现Mysql注入
    [转]Firefox+Burpsuite抓包配置(可抓取https)
    爬虫初窥day3:BeautifulSoup
  • 原文地址:https://www.cnblogs.com/jiangxiaobo/p/6413552.html
Copyright © 2011-2022 走看看