ajax - 根据 laravel 5.7 中的选择心愿单心形图标颜色变化
问题描述
我对编码的要求是“当我点击心愿单的心形图标时。如果我没有登录,那么我将进入登录页面,如果我登录了,那么当我在心愿单中添加项目时,fa-fa 心形颜色变为橙色&删除时呈灰色。我正在发送 json 响应,请参阅我的编码。
控制器:
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>
解决方案
首先添加dataType:'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');
}
}});
});
});
推荐阅读
- android - 接收器不兼容,需要地图!(安卓问题)
- ios - 如何启用 MPMediaItemArtwork 下一个/上一个按钮?
- firebase - Firebase/MLVisionTextModel 未通过 Pod iOS 安装
- javascript - 与弧的碰撞
- android - Firebase 身份验证:来自此 Android 客户端应用程序 com.xxx 的请求被阻止
- php - GNU emacs 的 PHP 模式未列为 MELPA 包
- ruby - 在 Ruby 中通过十六进制字符串获取 unicode
- outlook-addin - Office.context.roamingSettings.saveAsync 函数在使用 Dialog API for Office 加载项时出错
- php - 如何使用ajax将javascript变量值传递给php变量以存储在codeighter的会话中
- angular - 如何在角度 2 中为我的模态弹出窗口设置宽度和高度