自我感觉良好，所以拿出现在自己用的 Pjax.js 分享给大家
当然 这个版本是 经过本人修改后的版本，跟其它 拿过来就用的 不一样 而且区别还不小
大多的 Pjax 都是 跟后台无关的，而这个版本是跟后台有密切联系的
下面就是说下 代码 以及使用方法，包括后台 内容输出格式
先说说方法吧
- 引入 jQuery + Pjax.js (本站提供的代码)
- 下面就关键 运行代码 所接受的参数详解
- selector: 绑定 Pjax 的链接 默认："a[href]"
- container: 替换内容的容器的 jQuery 选择字符串 (非必须，一定很惊讶，这里其实就是传递给后台，需要什么内容，具体的替换是 安后台返回的替换) 默认： “#content”
- timeout: ajax 获取内容超时时间 单位：毫秒 默认：9000
- cache: 本地缓存时间有效期：单位: 秒 默认： false （不缓存）
- titleSuffix: 标题后缀 可以废除的参数 暂时保留
- filter: 是对 selector 的补充，也就是 对于不想 Pjax 的链接 返回 true,将用默认方式打开链接
- callback: Pjax 处理完毕的回调函数， 页面需重新 运行的代码 （如幻灯； 或者其他 需再次运行的 JS 代码）
- 后台的返回数据解析 返回的是 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}"]);'
)));