ajax - 在跟随 Laravel 上构建 AJAX 按钮

Question

我的 Blade View
我正在实时更新关注按钮，所以我注意到如果我点击取消关注它会自动更新以关注，但是当我点击关注时它什么也不做，直到我手动刷新页面

<button data-id="{{ $user->id }}" class="w-1/2 px-3 py-2 text-base text-white border rounded-lg action-follow bg-blue-lite hover:bg-blue"> <strong>
    @if (auth()->user()->isFollowing($user))
        UnFollow
    @else
        Follow
    @endif
    </strong>
</button>

$(document).ready(function() {

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

    $('.action-follow').click(function(){
        var user_id = $(this).data('id');
        var cObj = $(this);
        var c = $(this).parent("div").find(".tl-follower").text();

        $.ajax({
           type:'POST',
           url:'/profile/follow',
           data:{user_id:user_id},
           success:function(data){
              console.log(data.success);
              if(jQuery.isEmptyObject(data.data)){
                cObj.find("strong").text("Follow");
                cObj.parent("div").find(".tl-follower").text(parseInt(c)-1);
              }else{
                cObj.find("strong").text("UnFollow");
                cObj.parent("div").find(".tl-follower").text(parseInt(c)+1);
              }
           }
        });
    });

});

我的 Controller

public function follwUserRequest(Request $request){

        $user = User::find($request->user_id);
        $response = auth()->user()->toggleFollow($user);

        return response()->json(['success'=>$response]);
    }

Answer 1

试试这个:

  $user = User::find($request->user_id);
  $response = auth()->user()->toggleFollow($user);
  $status = auth()->user()->isFollowing($user);

  return response()->json([ 'success' => $response, 'is_following' => $status ]);

<button data-id="{{ $user->id }}" id="mybutton{{ $user->id }}"  class="w-1/2 px-3 py-2 text-base text-white border rounded-lg action-follow bg-blue-lite hover:bg-blue">
    <strong>
    @if (auth()->user()->isFollowing($user))
        UnFollow
    @else
        Follow
    @endif
    </strong>
</button>

$.ajax({
    type:'POST',
    url:'/profile/follow',
    data:{user_id:user_id},
    success:function(data){
        console.log(data);
        if(data.is_following == true){ 
            cObj.find("strong").text("UnFollow");
            cObj.parent("div").find(".tl-follower").text(parseInt(c)+1);
        }else{
            cObj.find("strong").text("Follow");
            cObj.parent("div").find(".tl-follower").text(parseInt(c)-1);
        }
    }
});