Laravel中如何通过Ajax实现点赞后返回点赞数量

我来帮你搞定这个实时更新点赞数的需求，其实只需要在现有代码基础上做几处小修改就行，分后端和前端两部分来调整：

第一步：修改后端控制器，返回当前总点赞数 #

你的AdsController.php里的likePost方法已经能成功插入点赞数据了，现在需要在保存后统计该内容的总点赞数，然后以JSON格式返回给前端：

public function likePost(Request $request){ 
    $likePost=new Like; 
    $likePost->user_id=Auth::user()->id; 
    $likePost->ad_id= $request->id; 
    $likePost->save();

    // 统计当前内容的总点赞数
    $totalLikes = Like::where('ad_id', $request->id)->count();
    // 返回JSON格式的点赞数数据
    return response()->json(['totalLikes' => $totalLikes]);
}

第二步：在视图中添加点赞数展示元素 #

你需要在点赞按钮旁边加一个专门显示点赞数的元素，并且给它绑定对应的内容ID，这样前端才能精准找到要更新的元素：

<!-- 假设你的内容ID是$ad->id，调整成你实际的变量名 -->
<button class="like" data-id="{{ $ad->id }}">点赞</button>
<span class="like-count" data-id="{{ $ad->id }}">{{ $ad->likes->count() }}</span> 人已赞

第三步：修改前端AJAX逻辑，更新页面点赞数 #

现在要修改app.blade里的AJAX代码，添加成功回调函数来更新页面上的点赞数，同时还要处理Laravel的CSRF验证和重复点击的问题：

$('.like').click(function(event) { 
    event.preventDefault(); // 防止按钮触发默认的表单提交行为
    var $likeBtn = $(this);
    var adId = $likeBtn.data('id'); 

    $.ajax({ 
        url: "{{route('post.like','')}}/"+adId, 
        method: 'POST', // 点赞操作建议用POST请求
        headers: {
            // 带上Laravel的CSRF令牌，避免请求被拦截
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            // 根据内容ID找到对应的点赞数元素，更新数值
            $('.like-count[data-id="' + adId + '"]').text(response.totalLikes);
            // 可以给按钮设置成已点赞状态，防止用户重复点击
            $likeBtn.prop('disabled', true).text('已点赞');
        },
        error: function() {
            // 处理请求失败的情况，给用户提示
            alert('点赞失败，请稍后重试');
        }
    });
});

额外注意：确保页面有CSRF令牌 #

Laravel默认会拦截没有CSRF令牌的POST请求，所以要确保你的页面头部已经包含了CSRF元标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

这样操作之后，用户点击点赞按钮，数据插入数据库的同时，页面上的点赞数就会实时更新啦～

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