Cette fois, je vais vous apporter une explication détaillée des cas d'utilisation de pjax dans le framework laravel. Quelles sont les précautions lors de l'utilisation de pjax dans le framework laravel. Ce qui suit est un cas pratique, prenons. un regard.
Quant à ce qu'est pjax, les lecteurs sont invités à Baidu.
Travail de préparation :
1. Téléchargez le fichier jquery.pjax.js et cliquez sur télécharger
2 Télécharger NProgress
3. . et référencé dans le fichier de mise en page. (Sous le répertoire public du framework)
Démarrer :
Ici, l'auteur utilise le modèle de backend adminLTE Pour une utilisation spécifique, veuillez vous référer à Utilisation d'AdminLTE dans Laravel5.*
Installation de Package composer (middleware laravel) :
$ composer require spatie/laravel-pjax
Copier après la connexion
Ajouter du code au fichier kernel.php :
// app/Http/Kernel.php
...
protected $middleware = [
...
\Spatie\Pjax\Middleware\FilterIfPjax::class,
];
Copier après la connexion
Configurer pjax pour terminer l'interaction avec la page : (ps : Le l'auteur l'utilise pour l'ensemble du site, pjax charge la page, donc configurez pjax dans le fichier js global. Les lecteurs peuvent le configurer séparément si nécessaire)
$.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();
});Copier après la connexion
À ce stade, laravel combiné avec pjax est terminé.
Pièce jointe :
La mise en page de l'auteur (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>Copier après la connexion
Fichier js global (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');
}
}
}
});
});
});
});Copier après la connexion
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
