喜欢和不喜欢 javascript 和 Laravel

Question

我正在尝试实现一种功能，用户可以喜欢和不同的产品使用 javascript 我遵循了这个Laravel - Favourite / Un-Favourite button 但它对我不起作用，无法点击按钮，关于如何修复的任何想法这个？

路线

Route::get('product/like/{id}', ['as' => 'product.like', 'uses' =>   'LikeController@likeProduct']);
Route::get('product/{product}/unlike','LikeController@destroy')->name('product.unlike');

Javascript

 <script>

function addToFavourites(productid, userid) {
var user_id = userid;
var product_id = productid;

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

刀片文件

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

Answer 1

让你的路由接受一个发布方法，因为你是通过 Ajax 发布的

Route::post('product/like/{id}', ['as' => 'product.like', 'uses' => 'LikeController@likeProduct']);
Route::post('product/{product}/unlike', 'LikeController@destroy')->name('product.unlike');

并使用 ES6 模板字符串并在 Ajax 请求中添加 CSRF 令牌标头

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

    $.ajax({
        method: 'post',
        url: `/product/like/${productid}`, // Use ES6 template and point to the url from root /
        data: {
            'user_id': userid,
            'product_id': productid,
        },
        success: function () {
            // hide add button
            $('#addfavourites' + productid).hide();
            // show delete button
            $('#deletefavourite' + productid).show();
        },
        error: function (XMLHttpRequest) {
            // handle error
        }
    });
}

希望对你有帮助