在laravel后台管理类项目中,我们需要实现头部导航栏、左侧菜单栏不变,中间内容模块部分实现局部刷新的功能。
Pjax刚好符合我们的要求。
1、安装引入
composer require spatie/laravel-pjax
2、注册中间件
进入laravel项目,app\Http\Kernel.php;
找到web中间件组
在最后加入Pjax中间件类
'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,
],
3、修改前端模板页面
引入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内的部分
最后再添加一个方法
<script type="text/javascript">
function LA() {}
LA.token = "{{ csrf_token() }}";
$(document).pjax('a', '#pjax-container');
$(document).on("pjax:timeout", function(event) {
// 阻止超时导致链接跳转事件发生
event.preventDefault()
});
</script>
现在再刷新我们的页面,就实现了局部刷新了。
若在项目中遇到使用pjax时,跳转的页面内<script>重复生成,下载更高版本的pjax即可解决。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。