> 백엔드 개발 > PHP 튜토리얼 > 在 Laravel 5 中集成 Pjax 实现无刷新加载页面的扩展包 -- Laravel Pjax

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

WBOY
풀어 주다: 2016-06-23 09:15:08
원래의
1314명이 탐색했습니다.

1、简介

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

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

2、安装

通过 Composer 安装扩展包:

$ composer require spatie/laravel-pjax
로그인 후 복사

接下来需要在 Kernel.php 中注册中间件,这里我们将其注册到web中间件组:

// app/Http/Kernel.phpprotected $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 的缓存随之自动失效。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿