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>

第五步：

<center>

<div id="usersafety_pjax_container">

<form action="" method="POST" usersafety-form-pjax>

{{csrf_field()}}

<input type="hidden" name="_method" value="put"/>

<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 class="layui-upload">

<button type="button" class="layui-btn" id="test1">上传图片</button>

<input type="hidden" id="myAudio" name="nm" value="{{$val->nm}}">

<div class="layui-upload-list">

<img class="layui-upload-img" id="demo1">

<p id="demoText"></p>

</div>

</div>

 

<input type="submit" value="提交">

 

</form>

</div>

</center>

 

<script src="/js/layui/layui.all.js" charset="utf-8"></script>

 

<script id="uploadContainer" name="content" style="width:100%;height:350px;display:none;" type="text/template"></script>

<script>

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>