Laravel Fav / Unfav функциональность, реализующая ajax

Question

Это мой первый пост, так что ожидайте некоторых ошибок,

Я недавно работал над системой блогов, используя Laravel, и я реализую функцию "нравится / не нравится" для моих сообщений, дело в том, , каждый раз, когда вы нажимаете кнопку «Мне нравится» или «Избранное», страница перезагружается, а затем показывает новое значение «Нравится». Дело в том, что я хочу сделать это в режиме реального времени, чтобы страница не перезагружалась каждый раз, когда вам нравится или не нравится каждое сообщение. Я думал о ajax запросе, но я понятия не имею, как его реализовать.
Любая помощь здесь приветствуется.

Любимый контроллер

namespace App\Http\Controllers;

use Brian2694\Toastr\Facades\Toastr;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class FavoriteController extends Controller
{
    //
    public function add($post){
        $user = Auth::user();
        $isFavorite = $user->favorite_posts()->where('post_id',$post)->count();

        if($isFavorite == 0){
            $user->favorite_posts()->attach($post);
            Toastr::success('Has añadido este post a favoritos','success');
            return redirect()->back();
        } else {
            $user->favorite_posts()->detach($post);
            Toastr::success('Has removido este post de favoritos','success');
            return redirect()->back();
        }

    }
}

Маршрут

Route::group(['middleware' => ['auth']], function(){
        Route::post('favorite/{post}/add','FavoriteController@add')->name('post.favorite');
});

Просмотр

url('category/slider/'.$category->image) }}">

Редактировать

Я написал некоторый код только для проверки

Форма лезвия

<a href="javascript:void(0);" onClick="favorito('favorite-form-{{ $post->id }}')" class="{{ !Auth::user()->favorite_posts->where('pivot.post_id',$post->id)->count() == 0? 'favorite_posts' : '' }}"><i class="ion-heart"></i>{{ $post->favorite_to_users->count() }}</a>
                                    <form  id="favorite-form-{{ $post->id }}" method="POST" action="{{ route('post.favorite',$post->id) }}" style="display: none;">
                                        @csrf
                                    </form>

Скрипт

<script>

    function favorito(form){
        var frm = $('#'+form);
        console.log(frm)
        frm.submit(function (e) {

            e.preventDefault();

            $.ajax({
                type: frm.attr('method'),
                url: frm.attr('action'),
                data: frm.serialize(),
                success: function (data) {
                    console.log('Submission was successful.');
                    console.log(data);
                },
                error: function (data) {
                    console.log('An error occurred.');
                    console.log(data);
                },
            });
        });
    }

</script>

Но это не работает