laravel无刷新加载之pjax

laravel 专栏收录该内容
16 篇文章 0 订阅

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','IndexController@ajaxContent');// 加载页面
});

主视图文件 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 的缓存随之自动失效。

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值