1、簡介

    Pjax 是一個 jQuery 外掛，其作用是使用 ajax 來加速頁面載入時間，工作原理是隻從伺服器獲取指定 HTML 片段，
    然後客戶端使用獲取到的內容更新區域性頁面。（關於pjax可以搜尋瞭解）
    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('/index/ajaxcontent','[email protected]');// 載入頁面
});

主檢視檔案 index\index.blade.php：

...
<a href="/index/ajaxcontent"> 要載入的頁面連結 </a>
...
<!-- 新增 Pjax 設定：(必須有一個空元素放載入的內容) -->
<div class="main-content" id="pjax-container">
    @yield('content') //與另一個檢視檔案對應
</div
 
>
...
<!-- JavaScripts建議將這些js下載到本地 -->
<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="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>

控制器檔案：

class IndexController extends Controller
{
    /**
     *  ajax載入頁面
     */
    public function ajaxContent()
    {
        return view('content.index');
    }
}

要載入的檢視檔案 content\index.blade.php：

@extends('index.index')//這裡繼承的是主檢視檔案
@section('content')    //繼承之後要載入的空間（頁面地址）
    123123123123123    //要載入的頁面
@stop

完成以上步驟，你會發現連續點選a標籤頁面不會發生跳轉而直接進行重新整理。
如果有其他連結的頁面，那麼只會重新整理 @yield(‘content’) 裡的內容，主體檢視內容已經被過濾掉。

注：該擴充套件包會設定一個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 的快取隨之自動失效。