简介
Pjax 是一个 jQuery 插件，其作用是使用 ajax 来加速页面加载时间，工作原理是只从服务器获取指定 HTML 片段，然后客户端使用获取到的内容更新局部页面。
Laravel Pjax 扩展包将 Pjax 集成到 Laravel 中，实现原理是提供一个中间件，返回 Pjax 期望的响应内容。
安装
通过 Composer 安装扩展包：
$ composer require spatie/laravel-pjax
接下来需要在 Kernel.php 中注册中间件，这里我们将其注册到web中间件组：
// app/Http/Kernel.php
protected $middlewareGroups = [
'web' => [
...
\Spatie\Pjax\Middleware\FilterIfPjax::class,
],
...
];
使用
该扩展包提供的中间件会处理服务端返回的内容并将其转化为 Pjax 插件期望服务端返回的内容。
这里我们以 php artisan make:auth 命令生成的默认视图文件为例演示其使用，首先我们修改路由文件 routes.php：
Route::group(['middleware' => 'web'], function () {
Route::get('/', function () {
return view('welcome');
});
Route::get('/home', 'HomeController@index');
Route::auth();
});
然后我们还需要修改默认布局文件 layouts/app.blade.php，添加 Pjax 设置：
<div class="main-content" id="pjax-container">
@yield('content')
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>
<script>
$(document).pjax('a', '#pjax-container');
$(document).on("pjax:timeout", function(event) {
// 阻止超时导致链接跳转事件发生
event.preventDefault()
});
</script>
</body>
</html>
这样我们就可以在浏览器中访问进行测试了：
你会发现在切换登录/注册按钮时页面不会发生跳转而直接进行刷新。
注：该扩展包会设置一个X-AJAX请求头以区别 pjax 请求和普通的 XHR 请求。在这种情况下，如果请求是 pjax，我们会跳过页面布局部分 HTML，只渲染页面主体部分内容。
Laravel 缓存失效
我们使用 Laravel Elixir 来管理前端缓存失效，你可以使用这种方法来让 Pjax 的缓存失效 —— 只需要引入elixir 方法作为 x-pjax-version meta 的 content 即可：
<meta http-equiv="x-pjax-version" content="{{ elixir('css/app.css') }}">
如果是多个文件的话这使用：
<meta http-equiv="x-pjax-version" content="{{ elixir('css/app.css') . elixir('css/app2.css') }}">
这样的话，如果前端缓存失效，那么 Pjax 的缓存随之自动失效。
pjax说明
$.pjax({
selector: 'a',
container: '#container', //内容替换的容器
show: 'fade', //展现的动画，支持默认和fade, 可以自定义动画方式，这里为自定义的function即可。
cache: true, //是否使用缓存
storage: true, //是否使用本地存储
titleSuffix: '', //标题后缀
filter: function(){},
callback: function(){}
})
参数及含义
=== options.selector
给哪些selector绑定pjax事件，一般的为："a", 如果要去掉一些外连的URL， 这里的selector可以为: "a[href^='[http://www.welefen.com']](http://www.welefen.com%27]/)"
，表示域名是www.welefen.com下才有pjax事件（也就是站内）。
=== options.container
内容变换容器，是指哪个容器里的内容发生的变换，如： '#content',
=== options.cache
缓存pjax的内容，对于更新不频繁的页面来说，缓存pjax内容可以减少HTTP请求数
options.cache的值是缓存时间，单位为秒，默认为: 24*3600(一天)
=== options.storage
是否使用本地存储进行内容的缓存，使用本地存储缓存的话即使关闭浏览器后，下次访问如果缓存时间有效的话会直接读取缓存的内容，避免重新请求了。
=== options.titleSuffix
标题后缀。
对于pjax显示标题，首先会从返回内容里查找，如果没有的话，会取当前a标签的title值，并可以指定统一的后缀
=== options.filter
过滤函数，虽然options.selector可以写个比较复杂的选择器，但有时候还要过滤一些URL，如：后台的URL。
这时候就可以使用options.filter函数进行过滤了。如：
{
fitler: function(href){
//对于wordpress后台的URL和wp-content里的URL不使用pjax
if(href.indexOf('/wp-admin') || href.indexOf('/wp-content')){
return true;
}
}
}
对于要过滤掉的URL， 需要返回值为true。
=== options.callback
回调函数，这个函数不同于pjax.start和pjax.end（这2个事件下面描述）事件。
该函数会在每个阶段都会执行，即使pjax发生error的时候，并且会传递一个参数标明当前的状态，如：
{
callback: function(status){
var type = status.type;
switch(type){
case 'success': ;break; //正常
case 'cache':;break; //读取缓存
case 'error': ;break; //发生异常
case 'hash': ;break; //只是hash变化
}
}
}
事件(events)
一般情况下使用ajax来获取数据的时候，我们都希望有个loading的效果，pjax本身不提供这个功能，但提供了2个相关的事件。
如果需要这样的功能，可以在事件里实现这种功能。
- pjax.start 在pjax ajax发送request之前调用
- pjax.end 在phax ajax结束时调用
这样你可以在pjax.start事件里显示loading效果，在pjax.end事件里隐藏loading了。如：
$('#container').bind('pjax.start', function(){
$('#loading').show();
})
$('#container').bind('pjax.end', function(){
$('#loading').hide();
})
浏览器支持
提供了history.pushState接口的浏览器才支持这个功能
如果浏览器不支持这个功能而调用pjax方法的话，实际上什么都没做，还是使用默认的链接响应机制
后端需要做的
类似于ajax, 异步请求的时候后端不能将公用的内容也返回。
所以需要一个判断是否pjax请求的接口。如：php可以借鉴下面的实现
function is_pjax(){ return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']; }
其他
实际上该类的封装借鉴于https://github.com/defunkt/jquery-pjax
对其增加了缓存、本地存储和动画等功能，并且将一些参数进行了优化。
pjax禁用
// 方案1
// pjax禁用
$.pjax.disable()
// 方案2
// 不用pjax
$(document).pjax('a:not(a[target="_blank"],a[no-pjax])', {
container: '#pjax-container'
});
<a href='xxx' no-pjax>链接</a>
// 方案3
在 vendor\encore\laravel-admin\src 的 Admin.php 中添加
/*
* Disable Pjax for current Request
*
* @return void
*/
public function noPjax()
{
$request = \Request::instance();
if ($request->headers->has("X-PJAX")) {
$request->headers->set("X-PJAX", false);
}
}
// 在用到pjax的控制器的方法里面加上
Admin::noPjax();