Laravel 8中使用Ajax新增/删除数据后如何显示Flash消息

问题根源 #

无法展示Flash消息的核心原因有两个：

• 控制器删除逻辑中没有调用Laravel的闪存方法，把提示消息存入一次性Session
• AJAX回调没有对返回结果做状态判断，逻辑存在疏漏

方案一：刷新页面渲染Flash消息（适配现有引入blade模板的逻辑） #

1. 修改控制器删除方法 #

在删除逻辑后增加闪存消息写入逻辑，根据删除结果存入不同提示，再返回带状态标识的JSON：

public function deleteData(Request $req) 
{
    $deletedata = buffalodata::destroy($req->id); 
    // 写入闪存消息，下一次请求时可被模板读取
    if ($deletedata) {
        $req->session()->flash('success', '数据删除成功');
    } else {
        $req->session()->flash('error', '数据删除失败，请重试');
    }

    return response()->json([
        'code' => $deletedata ? 0 : 1,
        'data' => $deletedata
    ]);
}

2. 确认flash-message模板逻辑 #

确保引入的flash-message.blade.php包含对应Session的渲染代码，参考如下：

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif
@if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

3. 调整AJAX请求逻辑 #

增加状态判断，删除成功后再刷新页面，此时闪存的消息会自动被模板渲染：

$(document).on('click', '#footer_delete_button', function() { 
    const deleteId = $('.did').text();
    $.ajax({
        type:'post',
        url: '/deleteData',
        data:{
            '_token': $('input[name=_token]').val(),
            'id'    : deleteId
        },
        success: function(res) {
            if (res.code === 0) {
                $('.item' + deleteId).remove();
                // 刷新后自动展示Flash消息
                location.reload();
            } else {
                alert('删除操作未生效，请重试');
            }
        },
        error: function() {
            alert('请求异常，请检查网络后重试');
        }
    });
});

方案二：无刷新直接展示Flash消息（无需重载页面） #

如果不想刷新页面，可以直接通过AJAX返回消息内容，前端动态插入到页面中：

1. 修改控制器方法 #

无需写入Session，直接把消息内容放到返回的JSON中：

public function deleteData(Request $req) 
{
    $deletedata = buffalodata::destroy($req->id); 
    if ($deletedata) {
        return response()->json([
            'code' => 0,
            'msg' => '数据删除成功',
            'data' => $deletedata
        ]);
    } else {
        return response()->json([
            'code' => 1,
            'msg' => '数据删除失败，请重试'
        ]);
    }
}

2. 调整AJAX逻辑，动态渲染消息 #

删除成功后移除对应DOM，直接把提示消息插入到页面顶部，可加自动消失效果：

$(document).on('click', '#footer_delete_button', function() { 
    const deleteId = $('.did').text();
    $.ajax({
        type:'post',
        url: '/deleteData',
        data:{
            '_token': $('input[name=_token]').val(),
            'id'    : deleteId
        },
        success: function(res) {
            if (res.code === 0) {
                $('.item' + deleteId).remove();
                // 拼接消息DOM
                const alertDom = `<div class="alert alert-success alert-dismissible fade show" role="alert">
                    ${res.msg}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>`;
                // 插入到内容区顶部
                $('.content-wrapper').prepend(alertDom);
                // 3秒后自动消失
                setTimeout(() => {
                    $('.alert').remove();
                }, 3000);
            } else {
                const errDom = `<div class="alert alert-danger alert-dismissible fade show" role="alert">
                    ${res.msg}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>`;
                $('.content-wrapper').prepend(errDom);
                setTimeout(() => {
                    $('.alert').remove();
                }, 3000);
            }
        },
        error: function() {
            const errDom = `<div class="alert alert-danger alert-dismissible fade show" role="alert">
                请求异常，请检查网络后重试
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>`;
            $('.content-wrapper').prepend(errDom);
            setTimeout(() => {
                $('.alert').remove();
            }, 3000);
        }
    });
});

新增数据场景适配 #

新增数据的逻辑和删除完全一致，只需要在新增的控制器方法中按相同规则写入闪存消息/返回消息内容，前端对应AJAX回调处理即可。

内容的提问来源于stack exchange，提问作者Rahul W