Ajax 心形图标颜色根据laravel 5.7中的选择而变化
我的编码要求是“当我点击wishlist心形图标时。如果我没有登录,那么我将进入登录页面,如果我登录,那么当我在wishlist中添加项目时,fa fa心形颜色将变为橙色,当项目删除时,颜色将变为灰色。我将发送json响应,请参考我的编码 控制器:Ajax 心形图标颜色根据laravel 5.7中的选择而变化,ajax,laravel,Ajax,Laravel,我的编码要求是“当我点击wishlist心形图标时。如果我没有登录,那么我将进入登录页面,如果我登录,那么当我在wishlist中添加项目时,fa fa心形颜色将变为橙色,当项目删除时,颜色将变为灰色。我将发送json响应,请参考我的编码 控制器: public function add_to_wishlist(Request $req) { $userId=Session::get('userid'); if(empty($userId))
public function add_to_wishlist(Request $req)
{
$userId=Session::get('userid');
if(empty($userId))
{
return response()->json(['status'=> 1]);
}
else
{
$checkWishlist=DB::select('select * from wishlist where user_id=? && product_id=?',[$userId,$req->sub_id]);
if($checkWishlist)
{
DB::table('wishlist')->where('user_id',$userId)->where('product_id',$req->sub_id)->delete();
return response()->json(['status'=> 2]);
}
else
{
DB::table('wishlist')->insert(['user_id'=>$userId,'product_id'=>$req->sub_id]);
return response()->json(['status'=> 3]);
}
}
}
刀片代码:
<input type="text" name="status" id="status" class="form-control status" value="">
<a class="sub" data-id="{{$value->sub_id}}" href="#"><i class="fa fa-heart" style="float:right;color:grey"></i></a>
jquery和ajax:
<script type="text/javascript">
$(document).ready(function(){
$('.sub').click(function(e) {
var sub_id=$(this).attr('data-id');
var input=$(this).prev();
e.preventDefault()
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/add-to-wishlist') }}",
method: 'get',
data: {
sub_id: sub_id,
},
success: function(result){
input.val(result.status);
}});
});
});
</script>
$(文档).ready(函数(){
$('.sub')。单击(函数(e){
var sub_id=$(this.attr('data-id');
var输入=$(this.prev();
e、 预防默认值()
$.ajaxSetup({
标题:{
'X-CSRF-TOKEN':$('meta[name=“\u-TOKEN”]”)。attr('content')
}
});
jQuery.ajax({
url:“{url('/add to wishlist')}}”,
方法:“get”,
数据:{
子单元id:子单元id,
},
成功:功能(结果){
输入.val(结果.状态);
}});
});
});
首先添加数据类型:'JSON'
然后在success
函数中添加一些条件:
$('.sub').click(function(e) {
var input = $(this);
...
...
$.ajax({
...
success: function(result){
var status = result.status;
input.val(status);
if(status==1){
//Not logged in
window.location.href ="path/to/login";
}else if(status==2){
//Delete
input.next().css('background','gray');
}else{
//Logged in
input.next().css('background','orange');
}
}});
});
});
你得到的答复是什么