Ajax按钮在刷新页面之前不会改变答案

【问题标题】：Ajax the button is not changing until refreshing pageAjax按钮在刷新页面之前不会改变
【发布时间】：2020-03-01 01:34:27
【问题描述】：

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

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

【问题讨论】：

因为你需要在success函数中更新你的按钮
如何更新？ @约瑟夫
尝试为您的按钮添加id 并从您的success 函数中写入此let data = $('#like_btn').text(); data = (data === 'like')? 'unlike' : 'like'; $('like_btn').text(data)
我应该把id放在哪里，我应该把那个代码放在成功函数的上面还是下面？ @约瑟夫
当然它没有改变，主要问题是你在整个 div 部分使用 if else 并将其分隔为不同的 div，你应该只显示：无 css 属性并使用 hide() 和 show()成功回调

标签： javascript php ajax laravel laravel-5

【解决方案1】：

首先，您应该更新 ajax 调用的成功函数中的按钮由于条件是写在blade模板中的，刷新页面后才会触发，所以为了改变按钮，在success函数里写代码。

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

<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();

未经测试，这只是你的一个想法。

【讨论】：