码迷,mamicode.com
首页 > Web开发 > 详细

Pjax.js防刷新技术

时间:2015-10-17 13:32:59      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:

  自我感觉良好,所以拿出现在自己用的 Pjax.js 分享给大家

当然 这个版本是 经过本人修改后的版本,跟其它 拿过来就用的 不一样 而且区别还不小

大多的 Pjax 都是 跟后台无关的,而这个版本是跟后台有密切联系的

下面就是说下 代码 以及使用方法,包括后台 内容输出格式

先说说方法吧

  1. 引入 jQuery + Pjax.js (本站提供的代码)
  2. 下面就关键 运行代码 所接受的参数详解
    • selector: 绑定 Pjax 的链接 默认:"a[href]"
    • container: 替换内容的容器的 jQuery 选择字符串 (非必须,一定很惊讶,这里其实就是传递给后台,需要什么内容,具体的替换是 安后台返回的替换) 默认: “#content”
    • timeout: ajax 获取内容超时时间 单位:毫秒 默认:9000
    • cache: 本地缓存时间有效期:单位: 秒 默认: false (不缓存)
    • titleSuffix: 标题后缀 可以废除的参数 暂时保留
    • filter: 是对 selector 的补充,也就是 对于不想 Pjax 的链接 返回 true,将用默认方式打开链接
    • callback: Pjax 处理完毕的回调函数, 页面需重新 运行的代码 (如幻灯; 或者其他 需再次运行的 JS 代码)
  3. 后台的返回数据解析 返回的是 JSON 数据,在后台 PHP 处理之前肯定是 Array (数组) 这里为了方便就以数组介绍 最后只需 用 json_encode($arr); 输出
    下面一个一个的介绍 用途:
    • code: 返回码 必须 正常 为 200,出现错误的时候任意
    • msg: 返回消息提示 当 code 不等于 200 的时候输出消息,可以用于 ajax 评论失败时候 的提示
    • title: 当前页面标题,用于前台输出
    • html: 这里是输出的 数组 键名就是 前台的 内同替换容器 内容就是 容器内需要替换的 HTML,前台更新内容就根据此处内容为准
    • scriptStr: 需要运行的 JS 代码 字符串形式: 其中可用的 {url}, {title}, {pjax} 在前台运行的时候 分别替换为 网址 标题 与 pjax 状态 (可以是 state cache ajax)
    •  
    • 后台判断当前请求是否为 Pjax 可以通过头文件判断 $_SERVER[‘HTTP_X_PJAX‘], 而 $_SERVER[‘HTTP_X_PJAX_CONTAINER‘] 这是存储前台 JS 设置的 container (可有可无)


要用了解的东西是真是不少
但好在是 自己写的比较熟悉了

接着就是代码部分了 JS 示例:

$.pjax({
  selector: ‘a[href^="‘+ BLOG_URL +‘"]:not("[ja_link],[no-pjax]")‘,
  container: "#main,.top",    /* 替换 HTML 的选择器 */
  cache: false,               /* 缓存时间 单位: 秒 默认: false (不缓存) */
  top: 0,                  /* 滚动条偏移 默认为 0 */
  filter: function(u, e) {    /* 复杂的筛选器 返回 true 不需要 Pjax */
    if (/admin\/|rss\.php/i.test(u)) return true;
  },
  callback: pjaxCallback
});

$(document)
  // 提交方式 为 GET 的表单 用 Pjax 处理
  .on(‘submit‘, ‘form[method=get]‘, function(){
    var $t = $(this);
    $.pjax.pjaxGet($t.attr("action") +‘?‘+ $t.serialize());
    return false;
  })
  
  // #commentform 表单 EMLOG 默认 评论表单  (EMLOG 评论需修改 评论失败提示用 msg 返回)
  .on(‘submit‘, ‘#commentform‘, function(){
    var $t = $(this), pid = $t.find(‘input[name=pid]‘).val();
    
    // 获取 评论后需要滚动到的位置  如果为 直接评论文章 就获取 评论列表 #comments 高度
    if(pid == 0)
      var top = $(‘#comments‘).offset().top
    else
      // 如果 为回复其它评论 就获取 被回复评论 高度
      var top = $("#comment-" + pid).offset().top
    $.pjax.pjaxGet($t.attr("action"), $t.serialize(), {
      url: document.location.href,
      title: document.title,
      top: top - 20
    });
    return false;
  })



接着就是 PHP 后台对于 Pjax 请求输出的栗子:

die(json_encode(array(
  ‘code‘      => 200,
  ‘msg‘       => false,
  ‘html‘      => array(
    ‘.top‘      => ‘class=top 输出内容 本人博客 此处是 幻灯,如果不是首页  不需要输出幻灯的话,输出 空内容即可‘,
    ‘#main‘     => ‘这里是 id=main 的 HTML 内容‘
  ),
  ‘title‘     => ‘CSS 样式练习 - 简爱‘, // 页面标题
   
  // 需要你运行的 JS 代码 这里是 Piwik 的 Ajax 统计 与自定义变量 用于统计 Pjax 事件
  ‘scriptStr‘ => ‘
    _paq.push(["setCustomVariable", 1, "pjax", "{pjax}", "page"]);
    _paq.push(["setCustomUrl", "{url}"]);
    _paq.push(["trackPageView", "{title}"]);‘
)));

 

Pjax.js防刷新技术

标签:

原文地址:http://www.cnblogs.com/bccn/p/4887295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!