Pjax.js防刷新技术 js教程

废话不多说,直接上教程

  1. 引入 jQuery + Pjax.js (本站提供的代码)
  2. 下面就关键 运行代码 所接受的参数详解
  3. selector: 绑定 Pjax 的链接 默认:"a[href]"
  4. container: 替换内容的容器的 jQuery 选择字符串
    (非必须,一定很惊讶,这里其实就是传递给后台,需要什么内容,具体的替换是 安后台返回的替换) 默认: “#content”
  5. timeout: ajax 获取内容超时时间 单位:毫秒 默认:9000
  6. cache: 本地缓存时间有效期:单位: 秒 默认: false (不缓存)
  7. titleSuffix: 标题后缀 可以废除的参数 暂时保留
  8. filter: 是对 selector 的补充,也就是 对于不想 Pjax 的链接 返回 true,将用默认方式打开链接
  9. callback: Pjax 处理完毕的回调函数, 页面需重新 运行的代码 (如幻灯; 或者其他 需再次运行的 JS 代码)

后台的返回数据解析 返回的是 JSON 数据,在后台 PHP 处理之前肯定是 Array (数组) 这里为了方便就以数组介绍 最后只需 用 json_encode($arr); 输出
下面一个一个的介绍 用途:

  1. code: 返回码 必须 正常 为 200,出现错误的时候任意
  2. msg: 返回消息提示 当 code 不等于 200 的时候输出消息,可以用于 ajax 评论失败时候 的提示title: 当前页面标题,用于前台输出
  3. html: 这里是输出的 数组 键名就是 前台的 内同替换容器 内容就是 容器内需要替换的 HTML,前台更新内容就根据此处内容为准
  4. scriptStr: 需要运行的 JS 代码 字符串形式: 其中可用的 {url}, {title}, {pjax} 在前台运行的时候分别替换为 网址 标题 与 pjax 状态 (可以是 state cache ajax)
  5. 后台判断当前请求是否为 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}"]);'
)));

请输入图片描述