Laravel Pjax（PushState + Ajax）无刷新更新页面

1. 在laradock根目录下，运行命令进入项目容器

docker-compose exec --user=laradock workspace dash

 

2. 运行命令安装 pjax

composer require spatie/laravel-pjax 

 安装成功如下：

3. 在项目中 app\Http\Kernel.php 添加中间件

protected $routeMiddleware = [
    ...
    'pjax' => \Spatie\Pjax\Middleware\FilterIfPjax::class,
];

4. 在 html 里引入pjax.js

<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

5. 在 script 里添加对 pjax的调用

通过 a 链接触发刷新 id 为pjax-container的控件
$(document).pjax('a', '#pjax-container')

6. 在 UserController 控制器里添加 pjax 中间件的调用

public function __construct()
{
    $this->middleware('pjax');
    $this->usersInfo = User::all(); // 获取数据库的数据
   }

public function index()
{
    return view('users.index', ['users' => $this->usersInfo]);
}

public function show($id)
{
    $currentUser = User::find($id);

    return view('users.show', [
            'currentUser' => $currentUser,
            'users' => $this->usersInfo
        ]
    );
}

7. 在 routes\web.php 里添加 route配置

Route::get('/users', [App\Http\Controllers\UserController::class, 'index'])->name('users.index');
Route::get('/users/{id}', [App\Http\Controllers\UserController::class, 'show'])->name('users.show');

8. 创建 resources\views\users\index.blade.php，并将需要刷新的 div 的 id 命名为 pjax-container

@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-4">
        <div>
            <ul class="list-group">
                @foreach($users as $userInfo)
                <li class="list-group-item">
                    <a href="{{ route('users.show', $userInfo->Id) }}" data-pjax>{{ $userInfo->name}}</a>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
    <div class="col-md-8" id="pjax-container">
        <div >
            @yield('user-info')
        </div>
    </div>
</div>
@endsection

9. 创建局部刷新的页面 resources\views\users\show.blade.php

@extends('users.index')

@section('user-info')
<div class="card">
    <div class="card-body">
        <h5 class="card-title">{{ $currentUser->age }}</h5>
        <p class="card-text">{{ $currentUser->phone }}</p>
    </div>
</div>
@endsection

 

 所有步骤已完成