cari

Rumah  >  Artikel  >  hujung hadapan web  >  laravel框架中pjax使用案例详解

laravel框架中pjax使用案例详解

php中世界最好的语言
php中世界最好的语言asal
2018-05-24 11:55:404067semak imbas

这次给大家带来laravel框架中pjax使用案例详解，laravel框架中pjax使用的注意事项有哪些，下面就是实战案例，一起来看一下。

关于什么是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(&#39;AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css&#39;)}}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ asset(&#39;AdminLTE/bower_components/font-awesome/css/font-awesome.min.css&#39;) }}">
    <!-- Ionicons -->
    <link rel="stylesheet" href="{{ asset(&#39;AdminLTE/bower_components/Ionicons/css/ionicons.min.css&#39;) }}">
    <!-- select2 -->
    <link rel="stylesheet" href="{{ asset(&#39;AdminLTE/bower_components/select2/dist/css/select2.min.css&#39;) }}">
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset(&#39;AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css&#39;) }}">
    <link rel="stylesheet" href="{{ asset(&#39;js_expand/dataTables.buttons/buttons.dataTables.min.css&#39;) }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{ asset(&#39;AdminLTE/dist/css/AdminLTE.min.css&#39;) }}">
    <!-- AdminLTE Skins -->
    <link rel="stylesheet" href="{{ asset(&#39;AdminLTE/dist/css/skins/skin-blue.min.css&#39;) }}">
    <!-- nprogress -->
    <link rel="stylesheet" href="{{ asset(&#39;js_expand/nprogress/nprogress.css&#39;) }}">
    <!-- toastr -->
    <link rel="stylesheet" href="{{ asset(&#39;js_expand/toastr/build/toastr.min.css&#39;) }}">
    <!-- sweetalert -->
    <link rel="stylesheet" href="{{ asset(&#39;js_expand/sweetalert/dist/sweetalert.css&#39;) }}">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn&#39;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(&#39;AdminLTE/bower_components/jquery/dist/jquery.min.js&#39;) }}"></script>
    <!-- jQuery 2 -->
    <script src="{{ asset(&#39;js_expand/jQuery/jQuery-2.1.4.min.js&#39;) }}"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="{{ asset(&#39;AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js&#39;) }}"></script>
    <!-- Select2 -->
    <script src="{{ asset(&#39;AdminLTE/bower_components/select2/dist/js/select2.full.min.js&#39;) }}"></script>
    <!-- AdminLTE App -->
    <script src="{{ asset(&#39;AdminLTE/dist/js/adminlte.min.js&#39;) }}"></script>
    <!-- dataTables -->
    <script src="{{ asset(&#39;AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js&#39;) }}"></script>
    <script src="{{ asset(&#39;AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js&#39;) }}"></script>
    <script src="{{ asset(&#39;js_expand/dataTables.lan.js&#39;) }}"></script>
    <script src="{{ asset(&#39;js_expand/dataTables.buttons/dataTables.buttons.min.js&#39;) }}"></script>
    <script src="{{ asset(&#39;vendor/datatables/buttons.server-side.js&#39;) }}"></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(&#39;js_expand/nprogress/nprogress.js&#39;) }}"></script>
<!-- pjax -->
<script src="{{ asset(&#39;js_expand/jquery-pjax/jquery.pjax.js&#39;) }}"></script>
<!-- toastr -->
<script src="{{ asset(&#39;js_expand/toastr/build/toastr.min.js&#39;) }}"></script>
<!-- sweetalert -->
<script src="{{ asset(&#39;js_expand/sweetalert/dist/sweetalert.min.js&#39;) }}"></script>
<!-- admin.base -->
<script src="{{ asset(&#39;js_expand/laravel-admin/admin.base.js&#39;) }}"></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');
                        }
                    }
                }
            });
        });
    });
});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

React结合TypeScript和Mobx步骤详解

React-router v4使用步骤详解

Atas ialah kandungan terperinci laravel框架中pjax使用案例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery使用须知Artikel seterusnya：EasyCanvas绘图库在Pixeler项目开发中使用实战总结

Artikel berkaitan

Lihat lagi