在laravel後臺管理類項目中,咱們須要實現頭部導航欄、左側菜單欄不變,中間內容模塊部分實現局部刷新的功能。
Pjax恰好符合咱們的要求。
一、安裝引入javascript
composer require spatie/laravel-pjax
二、註冊中間件
進入laravel項目,app\Http\Kernel.php;
找到web中間件組
在最後加入Pjax中間件類php
'web' => [ \App\Http\Middleware\EncryptCookies::class, \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, \Illuminate\Session\Middleware\StartSession::class, // \Illuminate\Session\Middleware\AuthenticateSession::class, \Illuminate\View\Middleware\ShareErrorsFromSession::class, \App\Http\Middleware\VerifyCsrfToken::class, \Illuminate\Routing\Middleware\SubstituteBindings::class, \Spatie\Pjax\Middleware\FilterIfPjax::class, ],
三、修改前端模板頁面
引入Pjax.js和jquery.js,前端
<div class="main-content" > <div class="page-content-area" id="pjax-container" style="overflow-y:scroll"> <div class="page-header"> <h1>Default Responsive(mobile) Menu </h1> </div><!-- /.page-header --> @yield('content') </div><!-- /.page-content --> </div><!-- /.main-content -->
只刷新pjax-container內的部分
最後再添加一個方法java
<script type="text/javascript"> function LA() {} LA.token = "{{ csrf_token() }}"; $(document).pjax('a', '#pjax-container'); $(document).on("pjax:timeout", function(event) { // 阻止超時致使連接跳轉事件發生 event.preventDefault() }); </script>
如今再刷新咱們的頁面,就實現了局部刷新了。jquery