ajax - 在关注 laravel 上构建一个 AJAX 按钮
问题描述
我的刀片视图
我正在实时更新关注按钮,所以我注意到如果我点击自动取消关注它会更新关注,但是当我点击关注时它什么都不做,直到我手动刷新页面
<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]);
}
解决方案
试试这个:
$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);
}
}
});
推荐阅读
- plugins - 使用 QueryExpression 创建 OrganizationServiceFault
- javascript - 有没有办法在 React 中保持选项卡的状态?
- python - 如何根据用户输入正确生成 DNA 序列?
- python - 从结尾开始的迭代切片索引(python):如何避免“-0”等于“0”?
- react-native - RangeError:Float32Array 的字节长度应该是新 Float32Array 的 4 的倍数
- javascript - 将 JS 变量从网站传递到 Chrome 扩展程序
- ios - 为什么线性渐变没有完全应用于ios按钮
- python - 将 boost::shared_ptrs 的向量的 std::vector 从 C++ 传递到 Python 的问题
- electron - 如何从电子的渲染过程中打开新的模式浏览器窗口
- javascript - React Leaflet 与分组层