构建一个AJAX按钮

Question

my 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);
}
}
});
});
});

我的控制器

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);
}
}
});