Как передать данные в базу данных с помощью JavaScript и Laravel

Question

Я создаю эту функциональность, где пользователю может понравиться продукт, в отличие от javascript, если пользователю нравится продукт, который он должен добавить в базу данных, а также, если ему не нравится продукт, его следует удалить в базе данных. Все работает нормально в обычном режиме, но если я использую javascript, кнопка «Мне нравится» не работает и либо не добавляет ничего в базу данных, то же самое относится и к кнопке «Не похоже». Как я могу сделать эту работу (как и в отличие от этого должно работать в базе данных тоже, не меняя значки, как и в отличие от)?

Javascript

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

Маршрут

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

Файл Blade

  @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

Как добавить в избранное

    public function likeProduct($id)
{


    if(Auth::check()){
    $this->handleLike(Product::class, $id);
    return redirect()->back();
    }
    else{
        return redirect()->route('login')
    }
}

public function handleLike($type, $id)
{
    $existing_like = Like::withTrashed()->whereLikeableType($type)->whereLikeableId($id)->whereUserId(Auth::id())->first();

    if (is_null($existing_like)) {
        Like::create([
            'user_id'       => Auth::id(),
            'likeable_id'   => $id,
            'product_id'   => $id,
            'likeable_type' => $type,
        ]);
    } else {
        if (is_null($existing_like->deleted_at)) {
            $existing_like->delete();
        } else {
            $existing_like->restore();
        }
    }
}

Answer 1

Я думаю, что вы не завершили фигурные скобки функции, проверьте мой код

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

Answer 2

Прежде всего я предлагаю изменить маршруты. Я имею в виду, используйте один и тот же шаблон для обоих действий: как и в отличие от

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

Затем проверьте, что вы видите на сервере, зарегистрируйте входящие данные. Это должно помочь понять, почему ваш алгоритм не работает.

Во-вторых, вы должны визуализировать оба элемента div в вашем шаблоне блейда

   <div class="CLASS_SHOW_ITEM" id="deletefavourite{{$product- >id}}"onClick="deleteFromFavourites({{$product->id}}, {{ Auth::user()->id }})"> unlike </div>
   <div class="CLASS_HIDE_ITEM" id="addfavourites{{$product->id}}" onClick="addToFavourites({{$product->id}}, {{ Auth::user()->id }})" > like </div>

Вы должны выбрать класс по значению атрибута $ продукт-> isLiked

Answer 3

сначала вы должны проверить в сети, чтобы увидеть запрос и ответ от элемента inspect, это заставит вас следить за проблемой. у вас могут быть проблемы с маршрутом, поэтому, пожалуйста, проверьте сеть во время почтового запроса.