如何使用ajax

2024-05-05 • 问答

当我单击删除按钮时，我想立即删除该产品，到目前为止，当我单击删除按钮时，它会隐藏该图标，并且该产品仍然显示，直到刷新页面然后该产品消失了，我该如何解决这个吗？

脚本

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

    $.ajax({
        method: 'post',url: `product/${productid}/unlike`,data: {
            'user_id': userid,'product_id': productid,},success: function () {

    console.log($('#deletefavourite' + productid));
            // show delete button
            $('#deletefavourite' + productid).hide();
        },});
    }

刀片文件

@foreach (Auth::user()->likedProducts as $product)
 <h4>USD {{$product->price }}</h4>
 <h1>USD {{$product->name }}</h1>

   <a style="display: {{$product->isLiked ? "" : "none"}}" id="deletefavourite{{$product->id}}" onClick="deleteFromFavourites({{$product->id}},{{ Auth::user() ? Auth::user()->id : 0 }})">Delete</a>

@endforeach

您必须更改为要隐藏的产品的父div，而不是隐藏' a '标签。

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

    $.ajax({
        method: 'post',url: `product/${productid}/unlike`,data: {
            'user_id': userid,'product_id': productid,},success: function () {
            // remove parent division on success
            this.parent().remove();
        },});
}

将刀片中的产品包装到div中。

@foreach (Auth::user()->likedProducts as $product)
 <div id="parentDiv">
   <h4>USD {{$product->price }}</h4>
   <h1>USD {{$product->name }}</h1>
   <a style="display: {{$product->isLiked ? "" : "none"}}" id="deletefavourite" data-user_id="{{ Auth::user() ? Auth::user()->id : 0 }}" data-product_id="{{$product->id}}">Delete</a>
 </div>
@endforeach

另一种解决方法是删除onclick并将onclick函数添加到您的js中。

$('#deletefovourite').click(function(){
   deleteFromFavourites($(this),$(this).data('product_id'),$(this).data('user_id'));
})

如何使用ajax

hateheart 回答：如何使用ajax

大家都在问