jQuery+pjax简单示例汇总


Posted in jQuery onApril 21, 2017

pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮。

ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中。pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏,这样用户就能愉快地使用前进后退了。pjax有好几个实现方法,这里使用最常用的jQuery库,使用jquery.pjax.js。演示代码的服务器端使用PHP脚本语言。

Pjax用在那儿?就说百度云盘吧,这个大家肯定都用过。百度云盘PC端,在点击打开某个文件夹后会打开这个文件夹下的文件,其实显示文件的这个div就用到了pjax技术。地址栏变换,内容更换,但是却是一个ajax请求。等到后退的时候,不必重新请求上一层文件夹的内容,因为是存在在历史记录中的。而且,开发者还可以选择时候使用cache和storage缓存。

示例一、

<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
  <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <div>
  Go to <a href="res1.php" rel="external nofollow" >第一页</a>.<a href="res2.php" rel="external nofollow" >第二页</a>
 </div>
 <div id="container"></div>  
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#container')
</script>
</html>

res1.php

<?php 
echo "<div style='background:red;'>第一页</div>";

res2.php

<?php 
echo "<div style='background:red;'>第二页</div>";

解释:

$(document).pjax('a', '#Container') 其中 a 是触发元素, #container 是装载 pjax 返回内容的容器,下面也是这样。

示例二、

<!DOCTYPE html>
<html>
<head>
 <title>pjax</title>
  <meta charset="utf-8">
</head>
<body>
 <h1>My Site</h1>
 <div>
  <input type="button" id="clickMe" value="GO">
 </div>
 <div id="container"></div>  
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
  $('#clickMe').click(function(){
    $.pjax({
      url: './res3.php',
      container: '#container'
    });
  });
});
</script>
</html>

服务器端代码:

res3.php:

<?php 
echo "<div style='background:red;'>第三页</div>";

三综合应用

window.history.pushState(state, title, url);
// https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
// @状态对象:  记录历史记录点的额外对象,可以为空.
// @页面标题:  目前所有浏览器都不支持.
// @可选的URL: 浏览器不会检查URL是否存在,只改变URL.URL必须同域,不能跨域.

PJAX其实就是HTML5 window.history.pushState(state, title, url)这个新的API加上传统的AJAX技术,一般用来实现无刷新的页面加载.pushState的作用主要是:改变URL和添加返回历史.这样AJAX无刷新加载页面后,用户还可以正常进行后退和前进,JS的window.history.back()和window.history.forward()也能正常工作.下面就是一个用pushState + jQuery AJAX实现的无刷新的页面加载,不支持的浏览器则自动退化成打开原始的链接打开形式.

index.php:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="main">
  <a href="data.php" rel="external nofollow" >data.php</a>
  <script>
  $(document).ready(function() {
    $('#main').on('click','a',function(e) {
      if(window.history.pushState) {
        e.preventDefault(); //不跟随原链接跳转
        url = $(this).attr('href');
        $.ajax({
          async: true,
          type: 'GET',
          url: 'data.php',
          data: 'pjax=1',
          success: function(data) {
            window.history.pushState(null, null, url); //改变URL和添加返回历史
            document.title = data.title; //设置标题
            $('#main').html(data.main); //设置内容
          }
        });
      } else {
        return; //低版本IE8等不支持HTML5 pushState,直接返回进行链接跳转
      }
    });
  });
  </script>
</div>
</body>
</html>

data.php:

<?php
if(isset($_GET['pjax'])) {
  //PJAX请求返回JSON
  $arr['title'] = 'Data';
  $arr['main'] = '<h1>Data Content</h1>';
  //下面这两句是把PHP数组转成JSON对象返回
  header('Content-Type: application/json; charset=utf-8');
  echo json_encode($arr);
} else {
  //常规请求返回HTML
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="main"><h1>Data Content</h1></div>
</body>
</html>
<?php } ?>

注意,JS统计代码应该放到main块里面才能正常统计页面访问数.

示例二:

<div class="body"> 
  <?php $action_name = $Think.ACTION_NAME; ?> 
 
  <!-- 头部哟 --> 
  <?php if ($action_name == 'news'): ?> 
    <include file="Brand:header_news" /> 
  <?php elseif ($action_name == 'forum'): ?> 
    <include file="Brand:header_forum" /> 
  <?php endif; ?> 
 
  <!-- 资讯的二级分类 --> 
  <div class="cb"></div> 
  <div class="brand-news-nav pjax"> 
    <ul class="clearfix"> 
      <li <?php if($_GET['cat'] == '') echo 'class="selected"'; ?>><a class="first" href="{:U("Brand/$action_name")}">全部</a></li> 
      <volist name="cat_list" id="vo" key="i"> 
        <li <?php if($_GET['cat'] == $vo['id']) echo 'class="selected"'; ?>><a href="{:U("Brand/$action_name",array('cat'=>$vo['id']))}">{$vo.name}</a></li> 
      </volist> 
    </ul> 
  </div> 
 
  <script type="text/javascript"> 
    $(function(){ 
      $(document).pjax('.pjax a', '#pjax-container',{ 
        type:'post', 
        scrollTo:false, 
      }); 
      $(document).on('pjax:click', function() { 
        enable_loading = false; 
      }) 
      $(document).on('pjax:send', function(){ 
        var str = "<p class='tc mt-10'>加载中...</p>"; 
        $('#pjax-container').html(str); 
      }) 
 
      //最后一个右侧加边框 
      $(".brand-news-nav ul li").last().children('a').addClass('last'); 
      $(".brand-news-nav ul li").click(function(){ 
        $(this).addClass('selected').siblings().removeClass('selected'); 
      }) 
    }) 
  </script> 
 
  <!-- 文章列表页 --> 
  <div class="wrap clearfix"> 
    <div class="brand-news-list fl" id="pjax-container"> 
      <include file="Brand:article_pjax" /> 
    </div> 
    <div class="brand-news-right fr pb-20"> 
      <a href="{$adv3[0]['url']}"><img class="scrollLoading" data-url="{$adv3[0]['images']|showImagePath}" src="__PUBLIC__/index/images/loading270x160.gif" width="260" height="150"></a> 
      <p class="title mt-10">法律支持</p> 
      <ul class="bgc-fff"> 
        <volist name="law_list" id="vo"> 
          <a href="{:U('law',array('id'=>$vo['id']))}"><li>{$vo.name}</li></a> 
        </volist> 
      </ul> 
      <button class="btn btn-right mt-10 btn-consult">免费咨询</button> 
      <script type="text/javascript"> 
        $(function(){ 
          //最后一个需要添加一个last的样式 
          $(".brand-news-right li:last").addClass('last'); 
        }) 
      </script> 
    </div> 
  </div> 
</div>

服务端代码

if(is_pjax()){ 
  $this->display('article_pjax'); 
}else{ 
  $this->display('article'); 
}
//判断是否是pjax请求 
function is_pjax(){ 
  return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']; 
}

其中的主要思想就是当.pjax a进行点击的时候,将#pjax-container的内容替换为请求后的内容。在后端处理时需要判断是否是pjax请求,如果是需要进行局部渲染,如果不是进行全部渲染。

因为pjax用到了HTML5技术,如果浏览器不支持Html5那么网站会正常进行跳转式的加载,如果支持那么只是进行局部渲染(但是浏览器地址栏中的url会正常跟着a链接进行变动)。

注意上述的js代码中在配置pjax时有个参数scrollTo:false,加上此参数表示点击连接后网页的scrollBar不会变动,如没有此参数,每次点击时浏览视窗会自动跳转到网页顶部

小结:Pjax实际就是从服务器端返回一段代码片段,而不用刷新页面,并且同时对 url 地址进行修改,这样可以节省资源加载,提升页面加载速度。

附: pjax的github项目地址 https://github.com/defunkt/jquery-pjax

jQuery 相关文章推荐
如何编写jquery插件
Mar 29 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
基于jQuery实现文字打印动态效果
Apr 21 #jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 #jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 #jQuery
jQuery Plupload上传插件的使用
Apr 19 #jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 #jQuery
jQuery加密密码到cookie的实现代码
Apr 18 #jQuery
Jquery-data的三种用法
Apr 18 #jQuery
You might like
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
js静态方法与实例方法分析
2011/07/04 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
详解vue v-model
2020/08/31 Javascript
python中定义结构体的方法
2013/03/04 Python
python开发简易版在线音乐播放器
2017/03/03 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Python lambda表达式用法实例分析
2018/12/25 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
校园文化建设方案
2014/02/03 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
六年级学生评语大全
2014/12/26 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫