Laravel实现AJAX实时关注按钮时点击关注无响应问题求助

问题原因 #

1. 响应字段不匹配 #

控制器返回的JSON结构为{"success": $toggleResult}，但前端JS代码中读取的是不存在的data.data字段，导致判断逻辑永远命中data.data为空的分支，只有取消关注时的操作刚好符合预期，关注操作逻辑完全走反。

2. 操作判断逻辑错误 #

toggleFollow方法返回的结果中，attached数组非空代表执行了关注操作，detached数组非空代表执行了取消关注操作，原有逻辑没有基于这个特征做判断，存在逻辑隐患。

3. 潜在拼写错误 #

控制器方法名follwUserRequest存在拼写错误（正确为followUserRequest），如果路由绑定的方法名和这个不一致也会导致请求失败。

修复方案 #

1. 修复控制器代码 #

修正拼写，同时保持返回结构清晰：

public function followUserRequest(Request $request){
    $user = User::find($request->user_id);
    $response = auth()->user()->toggleFollow($user);
    return response()->json([
        'success' => true,
        'data' => $response
    ]);
}

2. 修复前端JS逻辑 #

调整判断条件，基于toggleFollow的返回结果判断操作类型，同时增加点击锁防止重复提交：

$(document).ready(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $('.action-follow').click(function(){
        // 加锁防止重复点击
        if($(this).hasClass('loading')) return;
        $(this).addClass('loading');

        var user_id = $(this).data('id');
        var cObj = $(this);
        var followerCount = parseInt($(this).parent("div").find(".tl-follower").text());

        $.ajax({
           type:'POST',
           url:'/profile/follow',
           data:{user_id:user_id},
           success:function(data){
              // attached非空=关注成功，detached非空=取消关注成功
              if(data.data.attached.length > 0){
                // 关注成功，按钮改UnFollow，粉丝数+1
                cObj.find("strong").text("UnFollow");
                cObj.parent("div").find(".tl-follower").text(followerCount + 1);
              } else {
                // 取消关注成功，按钮改Follow，粉丝数-1
                cObj.find("strong").text("Follow");
                cObj.parent("div").find(".tl-follower").text(followerCount - 1);
              }
           },
           complete: function() {
              // 请求完成解锁
              cObj.removeClass('loading');
           }
        });
    });
});

3. 额外检查 #

确保页面头部存在CSRF的meta标签，否则AJAX请求会报419错误：

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

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