laravel框架學習之路（二）pjax的使用

gotham 發布于2019-08-22 17:28 / 1978人閱讀

摘要：繼第一篇文章發布之后框架學習之路一前后臺用戶認證分離，忙著項目上的事情，一直沒有時間寫文章。進入到新公司后，忙里偷閑，繼續我的框架學習之路。附件筆者的布局全局文件整頁刷新時，菜單顯示刪除按鈕確定刪除此項確定取消

繼第一篇文章發布之后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"http://配置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學習之路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95201.html

laravel框架學習之路（二）pjax的使用

摘要：繼第一篇文章發布之后框架學習之路一前后臺用戶認證分離，忙著項目上的事情，一直沒有時間寫文章。進入到新公司后，忙里偷閑，繼續我的框架學習之路。附件筆者的布局全局文件整頁刷新時，菜單顯示刪除按鈕確定刪除此項確定取消繼第一篇文章發布之后laravel框架學習之路（一）前后臺用戶認證分離，忙著項目上的事情，一直沒有時間寫文章。進入到新公司后，忙里偷閑，繼續我的laravel框架學習之路。如需...

vvpale 2019-08-02 10:31 評論0 收藏0
laravel框架學習之路（二）pjax的使用

摘要：繼第一篇文章發布之后框架學習之路一前后臺用戶認證分離，忙著項目上的事情，一直沒有時間寫文章。進入到新公司后，忙里偷閑，繼續我的框架學習之路。附件筆者的布局全局文件整頁刷新時，菜單顯示刪除按鈕確定刪除此項確定取消繼第一篇文章發布之后laravel框架學習之路（一）前后臺用戶認證分離，忙著項目上的事情，一直沒有時間寫文章。進入到新公司后，忙里偷閑，繼續我的laravel框架學習之路。如需...

lily_wang 2019-07-01 12:29 評論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