在 Laravel 5 中集成 Pjax 实现无刷新加载页面的扩展包 —— Laravel Pjax

pushstate  +  ajax   =pajax

一个分页查询的插件

1、简介

Pjax 是一个 jQuery 插件，其作用是使用 ajax 来加速页面加载时间，工作原理是只从服务器获取指定 HTML 片段，然后客户端使用获取到的内容更新局部页面。

Laravel

Pjax
扩展包将 Pjax 集成到 Laravel 中，实现原理是提供一个中间件，返回 Pjax 期望的响应内容。

2、安装

通过 Composer 安装扩展包：

$ composer require spatie/laravel-pjax

接下来需要在

Kernel.php

中注册中间件，这里我们将其注册到web中间件组：

// app/Http/Kernel.php
protected $middlewareGroups = [
'web' => [
...
\Spatie\Pjax\Middleware\FilterIfPjax::class,
],
...
];

3、使用

该扩展包提供的中间件会处理服务端返回的内容并将其转化为 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 的缓存随之自动失效。

链接 : http://laravelacademy.org/post/4973.html