Laravel实现点击按钮触发控制器方法不跳转页面 按钮无响应问题

你当前按钮无响应的核心原因是没有绑定提交逻辑、缺少对应路由，且Laravel的POST请求必须携带CSRF令牌，不想跳转可以选择以下两种实现方案：

方案1：普通表单提交（操作后自动刷新当前页，实现成本最低） #

1. 首先在web.php中添加路由配置，路由本身不会强制跳转，跳转逻辑由控制器返回值控制：

// 注意将YourController替换为你实际的控制器类名
Route::post('/add-school', [YourController::class, 'addSchool'])->name('add.school');

2. 修改前端页面代码，将输入框和按钮包裹在表单标签中，补充CSRF令牌：

<form action="{{ route('add.school') }}" method="POST">
    @csrf
    <div class="form-group">
        <h3 style="color: #000000" for="escola">Nome da Escola</h3>
        <input type="text" id="escola" name="escola" class="form-control" required>
    </div>
    <div>
        <button type="submit" class="btn btn-danger">Registar Escola</button>
    </div>
</form>

3. 调整控制器代码，补充参数校验，提交完成后返回当前页即可：

public function addSchool(Request $request)
{
    // 校验输入参数合法性
    $validated = $request->validate([
        'escola' => 'required|string|max:255',
    ]);
    
    DB::table('schools')->insert([
        'id_professor' => Auth::id(),
        'escola' => $validated['escola']
    ]);
        
    // back()方法会直接返回提交前的页面，等效刷新
    return back()->with('success', '学校添加成功');
}

方案2：AJAX异步提交（操作后页面完全不跳转，用户体验更好） #

1. 路由配置和方案1完全一致，只需修改控制器返回JSON响应：

public function addSchool(Request $request)
{
    $validated = $request->validate([
        'escola' => 'required|string|max:255',
    ]);
    
    DB::table('schools')->insert([
        'id_professor' => Auth::id(),
        'escola' => $validated['escola']
    ]);
        
    return response()->json([
        'code' => 200,
        'msg' => '添加成功'
    ]);
}

2. 前端页面无需表单标签，补充点击事件和AJAX逻辑即可：

<div class="form-group">
    <h3 style="color: #000000" for="escola">Nome da Escola</h3>
    <input type="text" id="escola" name="escola" class="form-control" required>
</div>
<div>
    <button type="button" id="addSchoolBtn" class="btn btn-danger">Registar Escola</button>
</div>

<!-- 项目已引入jQuery可跳过此说明 -->
<!-- 请确保页面已引入jQuery库，存放在本地静态资源目录即可 -->
<script>
$(function(){
    $('#addSchoolBtn').click(function(){
        let escola = $('#escola').val().trim();
        if(!escola){
            alert('请输入学校名称');
            return;
        }
        $.ajax({
            url: "{{ route('add.school') }}",
            type: 'POST',
            data: {
                '_token': "{{ csrf_token() }}",
                'escola': escola
            },
            success: function(res){
                if(res.code == 200){
                    alert(res.msg);
                    // 可自定义后续操作，比如清空输入框、更新页面列表等
                    $('#escola').val('');
                }
            },
            error: function(){
                alert('操作失败，请重试');
            }
        })
    })
})
</script>

注意事项 #

• 路由建议添加登录中间件保护，避免未登录状态下Auth::id()返回null导致插入失败
• 确保数据库id_professor字段类型和用户表主键类型完全一致，避免字段类型不匹配报错

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