laravel框架学习之路（二）pjax的使用

lily_wang 发布于2019-07-01 12:29 / 1030人阅读

摘要：继第一篇文章发布之后框架学习之路一前后台用户认证分离，忙着项目上的事情，一直没有时间写文章。进入到新公司后，忙里偷闲，继续我的框架学习之路。附件笔者的布局全局文件整页刷新时，菜单显示删除按钮确定删除此项确定取消

继第一篇文章发布之后laravel框架学习之路（一）前后台用户认证分离，忙着项目上的事情，一直没有时间写文章。进入到新公司后，忙里偷闲，继续我的laravel框架学习之路。如需参考代码请移步kaihongChan@github.com（ps:项目还在逐步完善中，还有许多不足，如遇bug，请在评论区告知笔者）

关于什么是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 = [

...

SpatiePjaxMiddlewareFilterIfPjax::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")

全局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");
                        }
                    }
                }
            });
        });
    });
});

GPU云服务器云服务器 laravel5框架开发机器学习学习之路机器学习之路 python学习之路

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/30810.html

laravel框架学习之路（二）pjax的使用

摘要：继第一篇文章发布之后框架学习之路一前后台用户认证分离，忙着项目上的事情，一直没有时间写文章。进入到新公司后，忙里偷闲，继续我的框架学习之路。附件笔者的布局全局文件整页刷新时，菜单显示删除按钮确定删除此项确定取消继第一篇文章发布之后laravel框架学习之路（一）前后台用户认证分离，忙着项目上的事情，一直没有时间写文章。进入到新公司后，忙里偷闲，继续我的laravel框架学习之路。如需...

gotham 2019-08-22 17:28 评论0 收藏0
laravel框架学习之路（二）pjax的使用

摘要：继第一篇文章发布之后框架学习之路一前后台用户认证分离，忙着项目上的事情，一直没有时间写文章。进入到新公司后，忙里偷闲，继续我的框架学习之路。附件笔者的布局全局文件整页刷新时，菜单显示删除按钮确定删除此项确定取消继第一篇文章发布之后laravel框架学习之路（一）前后台用户认证分离，忙着项目上的事情，一直没有时间写文章。进入到新公司后，忙里偷闲，继续我的laravel框架学习之路。如需...

vvpale 2019-08-02 10:31 评论0 收藏0
在 Laravel 5.1 中使用 Pjax

摘要：在的版本中，使用实现无刷新效果，以及酷炫的进度条项目地址求求求起因群里面的朋友老是在问怎么和结合，于是今天早上答应了给大家写一篇文章，到准备写的时候，发现其实挺简单的，也没有多少可写的东西，于是乎，干脆直接封装成包，大家直接安装用就好在 Laravel 5.* 的版本中，使用 Pjax 实现无刷新效果，以及酷炫的进度条项目地址：https://github.com/yccphp/p...

CntChen 2019-06-27 11:40 评论0 收藏0
Laravel 开源项目『糖果盒子 - Web 开发者的书签导航』

摘要：项目概述糖果盒子是采用开发的站点导航应用，专注分享优质开发资源站点，希望成为开发人员最喜爱的的书签导航。线上地址糖果盒子开发者的书签导航地址求环境要求部署安装本项目代码使用框架开发，本地开发环境使用。 showImg(https://segmentfault.com/img/remote/1460000012018405?w=3346&h=1950);showImg(https://s...

姘存按 2019-08-21 17:39 评论0 收藏0
Laravel 开源项目『糖果盒子 - Web 开发者的书签导航』

摘要：项目概述糖果盒子是采用开发的站点导航应用，专注分享优质开发资源站点，希望成为开发人员最喜爱的的书签导航。线上地址糖果盒子开发者的书签导航地址求环境要求部署安装本项目代码使用框架开发，本地开发环境使用。 showImg(https://segmentfault.com/img/remote/1460000012018405?w=3346&h=1950);showImg(https://s...

summerpxy 2019-08-01 18:00 评论0 收藏0