laravel pjax

第一步：

通过 Composer 安装扩展包：

composer require spatie/laravel-pjax

第二步：

接下来需要在 Kernel.php 中注册中间件，这里我们将其注册到web中间件组：

// app/Http/Kernel.php
protected $middlewareGroups = ['web' => [...\Spatie\Pjax\Middleware\FilterIfPjax::class,],...
];

第三步：

该扩展包提供的中间件会处理服务端返回的内容并将其转化为 Pjax 插件期望服务端返回的内容。

这里我们以 php artisan make:auth 命令生成的默认视图文件为例演示其使用，首先我们修改路由文件 routes.php：

Route::group(['middleware' => 'web'], function () {Route::get('/', function () {return view('welcome');});Route::get('/home', 'HomeController@index');Route::auth();
});

第四步：

然后我们还需要修改默认布局文件 layouts/app.blade.php，添加 Pjax 设置：

...<div class="main-content" id="pjax-container">@yield('content')
</div><!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>
<script>$(document).pjax('a', '#pjax-container');$(document).on("pjax:timeout", function(event) {// 阻止超时导致链接跳转事件发生event.preventDefault()});
</script>
</body>
</html>

第五步：

<input type="text" name="username_id" value="{{$val->username_id}}" placeholder="学号">

<br>

<input type="text" name="name" value="{{$val->name}}" placeholder="名字">

<br>

<input type="text" name="sex" value="{{$val->sex}}" placeholder="性别"> <br>

<input type="text" name="dance" value="{{$val->dance}}" placeholder="舞蹈"> <br>

<input type="text" name="music" value="{{$val->music}}" placeholder="音乐"> <br>

<input type="text" name="art" value="{{$val->art}}" placeholder="美术"> <br>

<input type="text" name="english" value="{{$val->english}}" placeholder="弗恩英语"> <br>

<input type="text" name="sport" value="{{$val->sport}}" placeholder="运动"> <br>

<input type="text" name="hobby" value="{{$val->hobby}}" placeholder="爱好"> <br>

<input type="text" name="skill" value="{{$val->skill}}" placeholder="特长"> <br>

</div>

</form>

</div>

</center>

layui.use('upload', function(){

var upload = layui.upload;

//执行实例

var uploadInst = upload.render({

elem: '#test1' //绑定元素

,url: '/api/img' //上传接口

,accept: 'images' //音频

,method: 'post'

,done: function(res){

//上传完毕回调

//如果上传失败

if(res.code > 0){

return layer.msg('上传失败');

}

//上传成功

document.getElementById('myAudio').value = res.url;

layer.msg('上传成功')

}

,error: function(){

//请求异常回调

}

});

//pjax提交修改密码表单

$(document).on('submit', 'form[usersafety-form-pjax]', function(event) {

$('#save_usersafety button').prop('disabled',true);

$('#save_usersafety span').append("<i class='fa fa-spinner fa-pulse'></i> 保存中...");

$.pjax.submit(event, '#usersafety_pjax_container',{

url:"{{url('/student/'.$val->id)}}"

});

return false;

});

</script>

laravel pjax相关推荐

在 Laravel 应用中使用 pjax 进行页面加速
说明# PHPHub 使用 pjax 来加速网页的加载, 这篇文章是在开发完此功能后做的笔记. 什么是 Pjax# .--./ \## a a( '._)|'-- |_.\___/_ ___pjax_ ...
laravel 除了主页都是404 webconfig_基于Laravel，开箱即用，这个PHP后台管理系统好看又省心...
提到 PHP 的后台管理系统,大家可能首先会想到的是 FastAdmin 或者 ThinkAdmin 这种老牌的开源项目,它们都是 Gitee 的 GVP 项目,很受 PHP 开发者们的欢迎.今天 G ...
设置响应主体格式php,Laravel如何实现适合Api的异常处理响应格式
前言 Laravel全局捕获异常后,会把异常转为相应的数据格式返回给用户.如果想要规定的数据格式相应,那我们只需重写异常捕获后的处理方法即可. 异常处理流程 Illuminate\Foundation ...
php pjax数据返回,如何将Pjax整合进网站，实现全站无刷新加载？
摘要: pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入HTML网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后退 ...
laravel框架学习之路（一）前后台用户认证分离
准备工作: 1.下载laravel框架 2.配置好项目(数据库连接以及虚拟主机) 开始: 前台用户认证laravel已经为我们写好了,此部分可参考官方文档创建模型(以adminstrator为例) ...
Laravel 精选资源大全
必备品文档:Documentation API:API Reference 视频:Laracasts 新闻:Laravel News 中文文档 Laravel学院– Laravel 5.1 中文文档 ...
Laravel/Lumen 使用 Redis队列
一.概述在Web开发中,我们经常会遇到需要批量处理任务的场景,比如群发邮件.秒杀资格获取等,我们将这些耗时或者高并发的操作放到队列中异步执行可以有效缓解系统压力.提高系统响应速度和负载能力. 二.配 ...
php – Laravel 7 Session Lifetime
根据Laravel config / session.php /* |----------------------------------------------------------------- ...
Laravel中Redis的配置和使用
引入redis composer require predis/predis 会在composer.json中引入最新版本的predis composer update 把下载predis 库加入到v ...

laravel pjax

laravel pjax相关推荐

最新文章

热门文章