Question

如果我单击“喜欢”或“不同”按钮，它将发送数据并按预期工作，但是问题是单击后直到我刷新页面后，它不会立即更改按钮。例如。当我单击“赞”按钮时，它应该更改为“与众不同”，我没有在控制台中看到错误，我看到了一些与此类似的问题，但是它们并没有解决我的问题。任何帮助将不胜感激。

JavaScript

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

$.ajax({
    method: 'post',
    url: `/product/like/${productid}`,
    data: {
        'user_id': userid,
        'product_id': productid,
    },
    success: function () {
        // hide add button
console.log($('#addfavourites' + productid));
        $('#addfavourites' + productid).show();
        // show delete button
        $('#deletefavourite' + productid).show();
    },
    error: function (XMLHttpRequest) {
        // handle error
    }
});

}

   // Unlike product
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 () {
        // hide add button
console.log($('#addfavourites' + productid));
        $('#addfavourites' + productid).show();
        // show delete button
        $('#deletefavourite' + productid).show();
    },
    error: function (XMLHttpRequest) {
        // handle error
    }
});
}

刀片文件

 @if($product->isLiked)
 <div id="deletefavourite{{$product->id}}"onClick="deleteFromFavourites({{$product->id}}, {{   Auth::user()->id }})"> unlike </div>
 @else
<div id="addfavourites{{$product->id}}" onClick="addToFavourites({{$product->id}}, {{ Auth::user()->id }})" > like </div>
@endif

Answer 1

首先，您应该更新ajax调用成功功能中的按钮由于条件是用刀片模板编写的，因此只有刷新页面后才会触发，因此要更改按钮，请在成功函数中编写代码。

尝试将代码更改为类似的内容

<div style="display: {{$product->isLiked ? "" : "none"}} id="deletefavourite{{$product->id}}"onClick="deleteFromFavourites({{$product->id}}, {{   Auth::user()->id }})"> unlike </div>
<div style=" display: {{!$product->isLiked ? "" : "none"}} id="addfavourites{{$product->id}}" onClick="addToFavourites({{$product->id}}, {{ Auth::user()->id }})" > like </div>

然后在成功函数中执行以下操作

喜欢后

$('#addfavourites'+productId).hide();
$('#deletefavourite'+productId).show();

取消呼叫后

$('#deletefavourite'+productId).hide();
$('#addfavourites'+productId).show();

未经测试，这只是给您的一个主意。

Ajax的按钮直到刷新页面后才会更改

1 个答案: