当前位置: 首页 > 后端技术 > PHP

laravel框架学习之路(二)pjax的使用

时间:2023-03-30 05:47:37 PHP

第一篇文章发布后,laravel框架学习之路(一)前后端用户认证分离。项目事情忙,没时间写文章。进入新公司后,在百忙之中抽空继续学习laravel框架。如果想参考代码,请到kaihongChan@github.com(ps:项目还在逐步完善中,还有很多不足之处,如果遇到bug,请在评论区告诉我。)关于什么是pjax,欢迎读者自行百度。准备工作:1、下载jquery.pjax.js文件,点击下载2、下载NProgress3,将需要的文件放入工程中,在布局文件中引用。(frameworkpublic目录下)开始:这里笔者使用adminLTE后台模板。具体使用方法请参考Laravel5中使用AdminLTE安装pjax的composer包(laravel中间件)*:$composerrequirespatie/laravel-pjaxinthekernel。在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;//配置可点击标签使用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):AdminLTE@include('admin::partials.header')@include('admin::partials.sidebar')@yield('content')

@include('admin::partials.control')@include('admin::partials.footer')
!--toastr-->全局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();});$(文档).on('提交','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-menuli: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();//整页刷新时,菜单显示varselector=$('.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');//数据表删除按钮$('#pjax-container').on('click','.row-delete',function(){vardel_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,},成功:function(data){if(typeofdata==='object'){if(data.status){swal(data.message,'','success');$.pjax.reload('#pjax-container');}else{swal(data.message,'','error');}}}});});});});