Laravel中模态框提交表单触发页面整体刷新的问题如何解决？

问题根因 #

你当前使用的是原生表单同步提交逻辑，浏览器默认会在表单提交后加载服务端返回的响应内容，所以触发页面刷新，return false未生效通常是事件绑定逻辑错误、没有正确阻止表单默认提交行为导致。

调整方案 #

1. 修改Blade表单结构 #

给表单添加唯一标识，示例结构如下（需要补全你现有表单的其他字段）：

<form id="addSubtitleForm" action="{{ route('add.subtitle', $class->id) }}" method="POST">
    @csrf
    <!-- 这里放你模态框内的其他表单字段 -->
    <div class="box-footer">
        <button type="button" id="submitSubtitleBtn" class="btn btn-lg col-md-3 btn-primary">{{ __('adminstaticword.Submit') }}</button>
    </div>
</form>

• 把提交按钮的type从submit改成button，从根源避免触发默认表单提交行为
• 给表单和提交按钮加ID方便JS绑定事件
• 确保表单内包含Laravel必填的@csrf令牌字段

2. 新增AJAX提交逻辑 #

在页面底部添加JS代码，用异步请求提交表单数据，不会触发页面刷新：

$('#submitSubtitleBtn').click(function () {
    // 收集表单数据
    let formData = new FormData($('#addSubtitleForm')[0]);
    
    $.ajax({
        url: $('#addSubtitleForm').attr('action'),
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (res) {
            // 提交成功后的逻辑：比如关闭模态框、弹出成功提示、刷新局部数据
            alert(res.msg);
            $('#你的模态框ID').modal('hide');
            // 如果你需要更新页面上的列表数据，可以在这里手动操作DOM，不需要刷新整个页面
        },
        error: function (err) {
            // 提交失败的错误处理，比如弹出字段校验提示
            alert('提交失败，请检查输入内容');
        }
    });
});

如果你的项目没有引入jQuery，也可以用原生fetch实现相同逻辑。

3. 修改控制器返回值 #

原来的return back()是给同步提交用的跳转逻辑，AJAX请求需要返回JSON格式响应：

public function post(Request $request, $id)
{
    // 你的原有业务处理逻辑不变
    return response()->json([
        'code' => 200,
        'msg' => trans('flash.AddedSuccessfully')
    ]);
}

4. 路由不需要修改 #

你现有web.php里的路由配置可以直接复用，不需要调整。

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