Laravel 8博客应用如何实现评论实时更新？

我基于Laravel 8开发了一款博客应用，支持文章评论及评论回复功能，目前正在开发评论更新功能。

Comment模型中关联评论与回复的代码：

public function replies() {
  return $this->hasMany(Comment::class, 'parent_id');
}

控制器更新代码：

public function update_comment(Request $request, $id) {
    $comment = Comment::find($id);

    if ($comment->user_id === auth()->user()->id) {
      $comment->body = $request->get('msg');
      $comment->save();
      
      if ($request->expectsJson()) {
        return response()->json([
          'status'    => 'success',
          'message'   => 'The comment was updated.'
        ]);
      } else {
        return redirect()->back()->with('success', 'The comment was updated.');
      }
      
    } 
}

应用支持主题切换，上述代码兼容AJAX与非AJAX请求。在comments-list.blade.php中渲染评论列表，同时使用同一模板编辑评论和回复，前端通过jQuery的AJAX提交表单。目前更新功能可正常工作，但需要实现无需刷新页面，就能在页面上实时显示更新后的评论或回复，请问该如何实现？

要实现无刷新更新页面评论内容，需要从后端返回更新后的评论数据，再通过前端JS操作DOM替换旧内容，具体步骤如下：

1. 调整后端控制器，返回更新后的评论数据 #

修改update_comment方法的JSON响应，把更新后的评论核心字段（比如id和body）一起返回，让前端能拿到最新内容：

public function update_comment(Request $request, $id) {
    $comment = Comment::find($id);

    if ($comment->user_id === auth()->user()->id) {
      $comment->body = $request->get('msg');
      $comment->save();
      
      if ($request->expectsJson()) {
        return response()->json([
          'status'    => 'success',
          'message'   => 'The comment was updated.',
          'comment'   => [
              'id' => $comment->id,
              'body' => $comment->body
              // 若需要更新时间等其他字段，可在此追加
          ]
        ]);
      } else {
        return redirect()->back()->with('success', 'The comment was updated.');
      }
      
    } 
}

2. 前端AJAX提交后处理DOM替换 #

首先确保模板中每个评论/回复容器带有唯一标识（比如data-comment-id），方便精准定位：

<div class="comment-item" data-comment-id="{{ $comment->id }}">
    <div class="comment-body">{{ $comment->body }}</div>
    <!-- 编辑表单 -->
    <form class="comment-edit-form" data-comment-id="{{ $comment->id }}" action="{{ route('comments.update', $comment->id) }}" method="POST">
        @csrf
        @method('PUT')
        <textarea name="msg">{{ $comment->body }}</textarea>
        <button type="submit">保存修改</button>
    </form>
</div>

然后编写jQuery的AJAX提交逻辑，在成功回调中替换对应评论的内容：

$(document).on('submit', '.comment-edit-form', function(e) {
    e.preventDefault(); // 阻止表单默认跳转

    const $form = $(this);
    const commentId = $form.data('comment-id');
    const url = $form.attr('action');
    const msg = $form.find('textarea[name="msg"]').val();

    $.ajax({
        url: url,
        method: 'PUT',
        data: {
            _token: '{{ csrf_token() }}',
            msg: msg
        },
        success: function(response) {
            if (response.status === 'success') {
                // 定位到目标评论容器，替换内容
                const $commentItem = $(`.comment-item[data-comment-id="${commentId}"]`);
                $commentItem.find('.comment-body').text(response.comment.body);
                
                // 可选：切换回评论显示状态（隐藏编辑表单）
                $form.hide();
                $commentItem.find('.comment-body').show();
                
                // 显示成功提示（可替换为项目内的提示组件）
                alert(response.message);
            }
        },
        error: function() {
            alert('更新失败，请重试');
        }
    });
});

额外注意事项 #

• 确保每个评论/回复的data-comment-id唯一，避免定位错误
• 如果评论支持HTML内容，替换时用.html()而非.text()，但后端要做好XSS过滤
• 主题切换功能不影响此逻辑，因为仅操作DOM内容，与样式无关

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