Ajax无响应问题求助：Laravel动态评论区功能失效排查

我帮你排查下代码里的关键问题，这几个点是导致点击提交按钮没反应的核心原因：

1. 按钮点击事件绑定失败 #

你的Ajax代码里绑定了#submitComment这个ID的点击事件，但在Blade模板中，提交按钮并没有设置这个ID：

{{Form::submit('Submit', ['class' => 'btn btn-primary'])}}

点击事件找不到对应的元素，自然不会执行Ajax逻辑。给按钮加上ID即可：

{{Form::submit('Submit', ['class' => 'btn btn-primary', 'id' => 'submitComment'])}}

2. 控制器返回值不符合Ajax预期 #

你在CommentsController@store里返回的是页面重定向：

return redirect()->back()->with('success', 'Comment Created');

但Ajax是异步请求，它需要的是JSON格式的响应，重定向对Ajax来说无法触发success回调，甚至可能直接进入错误逻辑。修改控制器返回JSON：

public function store(Request $request)
{
    $this->validate($request, [
        'body' => 'required'
    ]);

    // 创建评论逻辑不变
    $comment = new Comment;
    $comment->body = $request->body;
    $comment->user_name = auth()->user()->name;
    $comment->post_id = $request->post_id;
    $comment->profile_picture = auth()->user()->profile_picture;
    $comment->save();

    // 返回JSON响应替代重定向
    return response()->json(['success' => 'Comment Created']);
}

3. 额外优化：监听表单提交更可靠 #

绑定按钮点击有时候会因为表单默认提交行为没完全阻断出问题，换成监听表单的submit事件会更稳妥：

$(document).ready(function(){
    $('#myForm').submit(function(e){
        e.preventDefault(); // 彻底阻止表单默认提交动作

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        $.ajax({
            url: "{{ url('/comments') }}",
            method: 'POST',
            data: {
                body: $('#commentBody').val(),
                post_id: $('#post_id').val()
            },
            success: function(result){
                $('.alert').show();
                $('.alert').html(result.success);
                // 清空输入框优化用户体验
                $('#commentBody').val('');
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }
        });
    });
});

做完这几个修改后，点击提交按钮应该就能正常触发Ajax请求，完成评论创建并显示成功提示了。

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