关于什么是pjax，请读者自行百度。
准备工作：
1、下载jquery.pjax.js文件点击下载
2、下载nprogress
3、将所需文件放入项目中，并在布局文件中引用。（框架public目录下）
开始：
这里笔者使用的是adminlte后台模板，具体使用可参考在laravel5.* 中使用 adminlte
安装pjax的composer包（laravel中间件）：
$ composer require spatie/laravel-pjax
在kernel.php文件中加入代码:
// app/http/kernel.php ... protected $middleware = [ ... \spatie\pjax\middleware\filterifpjax::class, ];
配置pjax完成页面交互：（ps：笔者整站使用pjax加载页面，故在全局js文件中配置pjax，读者可根据需要另行配置）
$.pjax.defaults.timeout = 5000; $.pjax.defaults.maxcachelength = 0; //配置可点击的<a>标签使用pjax $(document).pjax('a:not(a[target=_blank])', { container: '#pjax-container'//配置pjax刷新容器 }); nprogress.configure({parent: '#pjax-container'}); //超时执行函数 $(document).on('pjax:timeout', function (event) { event.preventdefault(); });
至此，laravel结合pjax已完成。
附件：
笔者的布局（layout.blade.php）：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>adminlte</title> <!-- tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="{{ asset('adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css')}}"> <!-- font awesome --> <link rel="stylesheet" href="{{ asset('adminlte/bower_components/font-awesome/css/font-awesome.min.css') }}"> <!-- ionicons --> <link rel="stylesheet" href="{{ asset('adminlte/bower_components/ionicons/css/ionicons.min.css') }}"> <!-- select2 --> <link rel="stylesheet" href="{{ asset('adminlte/bower_components/select2/dist/css/select2.min.css') }}"> <!-- datatables --> <link rel="stylesheet" href="{{ asset('adminlte/bower_components/datatables.net-bs/css/datatables.bootstrap.min.css') }}"> <link rel="stylesheet" href="{{ asset('js_expand/datatables.buttons/buttons.datatables.min.css') }}"> <!-- theme style --> <link rel="stylesheet" href="{{ asset('adminlte/dist/css/adminlte.min.css') }}"> <!-- adminlte skins --> <link rel="stylesheet" href="{{ asset('adminlte/dist/css/skins/skin-blue.min.css') }}"> <!-- nprogress --> <link rel="stylesheet" href="{{ asset('js_expand/nprogress/nprogress.css') }}"> <!-- toastr --> <link rel="stylesheet" href="{{ asset('js_expand/toastr/build/toastr.min.css') }}"> <!-- sweetalert --> <link rel="stylesheet" href="{{ asset('js_expand/sweetalert/dist/sweetalert.css') }}"> <!-- html5 shim and respond.js ie8 support of html5 elements and media queries --> <!-- warning: respond.js doesn't work if you view the page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- google font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=source+sans+pro:300,400,600,700,300italic,400italic,600italic"> <!-- required js scripts --> <!-- jquery 3 --> <script src="{{ asset('adminlte/bower_components/jquery/dist/jquery.min.js') }}"></script> <!-- jquery 2 --> <script src="{{ asset('js_expand/jquery/jquery-2.1.4.min.js') }}"></script> <!-- bootstrap 3.3.7 --> <script src="{{ asset('adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script> <!-- select2 --> <script src="{{ asset('adminlte/bower_components/select2/dist/js/select2.full.min.js') }}"></script> <!-- adminlte app --> <script src="{{ asset('adminlte/dist/js/adminlte.min.js') }}"></script> <!-- datatables --> <script src="{{ asset('adminlte/bower_components/datatables.net/js/jquery.datatables.min.js') }}"></script> <script src="{{ asset('adminlte/bower_components/datatables.net-bs/js/datatables.bootstrap.min.js') }}"></script> <script src="{{ asset('js_expand/datatables.lan.js') }}"></script> <script src="{{ asset('js_expand/datatables.buttons/datatables.buttons.min.js') }}"></script> <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script> </head> <body class="hold-transition skin-blue sidebar-mini"> <p class="wrapper"> <!-- main header --> @include('admin::partials.header') <!-- left side column. contains the logo and sidebar --> @include('admin::partials.sidebar') <!-- content wrapper. contains page content --> <p class="content-wrapper"> <!-- main content --> <section class="content container-fluid" id="pjax-container"> @yield('content') </section> <!-- /.content --> </p> <!-- /.content-wrapper --> <!-- control sidebar --> @include('admin::partials.control') <!-- /.control-sidebar --> <!-- main footer --> @include('admin::partials.footer') </p> <!-- ./wrapper --> <script> var csrf_token = '{{ csrf_token() }}'; </script> <!-- nprogress --> <script src="{{ asset('js_expand/nprogress/nprogress.js') }}"></script> <!-- pjax --> <script src="{{ asset('js_expand/jquery-pjax/jquery.pjax.js') }}"></script> <!-- toastr --> <script src="{{ asset('js_expand/toastr/build/toastr.min.js') }}"></script> <!-- sweetalert --> <script src="{{ asset('js_expand/sweetalert/dist/sweetalert.min.js') }}"></script> <!-- admin.base --> <script src="{{ asset('js_expand/laravel-admin/admin.base.js') }}"></script> <!-- custom script--> <script> var selectedmenu = {!! $requesturi !!}; </script> </body> </html>
全局js文件（admin-base.js）：
toastr.options = { closebutton: true, progressbar: true, showmethod: 'slidedown', positionclass: 'toast-top-right', timeout: 4000 }; $.pjax.defaults.timeout = 5000; $.pjax.defaults.maxcachelength = 0; $(document).pjax('a:not(a[target=_blank])', { container: '#pjax-container' }); nprogress.configure({parent: '#pjax-container'}); $(document).on('pjax:timeout', function (event) { event.preventdefault(); }); $(document).on('submit', 'form[pjax-container]', function (event) { $.pjax.submit(event, '#pjax-container') }); $(document).on(pjax:popstate, function () { $(document).one(pjax:end, function (event) { $(event.target).find(script[data-exec-on-popstate]).each(function () { $.globaleval(this.text || this.textcontent || this.innerhtml || ''); }); }); }); $(document).on('pjax:send', function (xhr) { if (xhr.relatedtarget && xhr.relatedtarget.tagname && xhr.relatedtarget.tagname.tolowercase() === 'form') { $submit_btn = $('form[pjax-container] :submit'); if ($submit_btn) { $submit_btn.button('loading') } } nprogress.start(); }); $(document).on('pjax:complete', function (xhr) { if (xhr.relatedtarget && xhr.relatedtarget.tagname && xhr.relatedtarget.tagname.tolowercase() === 'form') { $submit_btn = $('form[pjax-container] :submit'); if ($submit_btn) { $submit_btn.button('reset') } } nprogress.done(); }); $(function () { $('.sidebar-menu li:not(.treeview) > a').on('click', function () { var $parent = $(this).parent().addclass('active'); $parent.siblings('.treeview.active').find('> a').trigger('click'); $parent.siblings().removeclass('active').find('li').removeclass('active'); }); $('[data-toggle=popover]').popover(); //整页刷新时，菜单显示 var selector = $('.sidebar-menu').find('a[href=/'+ selectedmenu +']'); selector.parent().addclass('active'); selector.parents('ul.treeview-menu').css('display', 'block'); selector.parents('li.treeview').addclass('menu-open'); //datatables删除按钮 $('#pjax-container').on('click', '.row-delete', function () { var del_url = $(this).data('url'); swal({ title: 确定删除此项？, type: warning, showcancelbutton: true, confirmbuttoncolor: #dd6b55, confirmbuttontext: 确 定, closeonconfirm: false, cancelbuttontext: 取 消 }, function(){ $.ajax({ method: 'post', url: del_url, data: { _method:'delete', _token:csrf_token, }, success: function (data) { if (typeof data === 'object') { if (data.status) { swal(data.message, '', 'success'); $.pjax.reload('#pjax-container'); } else { swal(data.message, '', 'error'); } } } }); }); }); });
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
react结合typescript和mobx步骤详解
react-router v4使用步骤详解
以上就是laravel框架中pjax使用案例详解的详细内容。