[laravel] 비동기로 바삭하게 만드는 좋은 기능

좋아 기능 자체, 양식은 다르지만 많은 사이트에서 보는 기능 이군요 ~
이번에는 Ajax를 사용하여 비동기를 수행하고 있지만 흐름은 이런 느낌입니다.


처음에 소개한 샘플을 여기 에 있어, Seeder를 만들고 있으므로 간단하게 확인할 수 있을까 생각합니다

코딩

index.blade.php : 실제로 표시하는 화면
like.js : 좋아요 버튼을 눌렀을 때의 처리와 실제로 HTML을 다시 쓰는 처리
ProductController : js에서 보낸 데이터를 처리하는 메서드가있는 컨트롤러
※auth가 유효하게 되어 있지만 전제

index.blade.php

        @if(auth()->user())
              @if(isset($product->like_products[0]))
                  <a class="toggle_wish" product_id="{{ $product->id }}" like_product="1">
                       <i class="fas fa-heart"></i>
                  </a>
              @else
                  <a class="toggle_wish" product_id="{{ $product->id }}" like_product="0">
                      <i  class="far fa-heart"></i>
                  </a> 
              @endif
          @endif  

like.js

$(function ()
{
    //「toggle_wish」というクラスを持つタグがクリックされたときに以下の処理が走る
    $('.toggle_wish').on('click', function ()
    {
        //表示しているプロダクトのIDと状態、押下し他ボタンの情報を取得
        product_id = $(this).attr("product_id");
        like_product = $(this).attr("like_product");
        click_button = $(this);

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')  //基本的にはデフォルトでOK
            },
            url: '/like_product',  //route.phpで指定したコントローラーのメソッドURLを指定
            type: 'POST',   //GETかPOSTメソットを選択
            data: { 'product_id': product_id, 'like_product': like_product, }, //コントローラーに送るに名称をつけてデータを指定
                })
            //正常にコントローラーの処理が完了した場合
            .done(function (data) //コントローラーからのリターンされた値をdataとして指定
            {
                if ( data == 0 )
                {
                    //クリックしたタグのステータスを変更
                    click_button.attr("like_product", "1");
                    //クリックしたタグの子の要素を変更(表示されているハートの模様を書き換える)
                    click_button.children().attr("class", "fas fa-heart");
                }
                if ( data == 1 )
                {
                    //クリックしたタグのステータスを変更
                    click_button.attr("like_product", "0");
                    //クリックしたタグの子の要素を変更(表示されているハートの模様を書き換える)
                    click_button.children().attr("class", "far fa-heart");
                }
            })
            ////正常に処理が完了しなかった場合
            .fail(function (data)
            {
                alert('いいね処理失敗');
                alert(JSON.stringify(data));
            });
    });
});

ProductController

 public function like_product(Request $request)
    {
         if ( $request->input('like_product') == 0) {
             //ステータスが0のときはデータベースに情報を保存
             LikeProduct::create([
                 'product_id' => $request->input('product_id'),
                  'user_id' => auth()->user()->id,
             ]);
            //ステータスが1のときはデータベースに情報を削除
         } elseif ( $request->input('like_product')  == 1 ) {
             LikeProduct::where('product_id', "=", $request->input('product_id'))
                ->where('user_id', "=", auth()->user()->id)
                ->delete();
        }
         return  $request->input('like_product');
    } 

후기

아직 수행중인 몸이므로 기사를 작성하는 방법과 코드에 대한 조언과 편집 요청 등이 있으면 알려주세요!