Laravel AJAX (with jQuery)

Настроить vite и подключить jQuery как описано здесь...

Vite подключение jQuery

В хэде прописать подключение js и csrf токен

@vite(['resources/css/app.css', 'resources/js/app.js'])
<meta name="_token" content="{{csrf_token()}}" />

Прописать форму и скрипт отправки запроса

index.blade.php
<form id="contactForm">
    <input id="word" type="text"/>
    <button type="submit">Отправить</button>
</form>

<script type="module">
    // запустить после того как документ полностью прогрузиться
    $(document).ready(function () {
        $("#contactForm").submit(function (event) {
            // содержимое инпутов 
            var formData = {
                word: $("#word").val(),
            };

            // устанавливаем токен в заголовке запроса
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });

            // отправляем ajax запрос на наш роут с именем 'check-word'
            $.ajax({
                type: "POST",
                url: "{{route('check-word')}}",
                data: formData,
                dataType: "json",
                encode: true,
                success: function (data){ // выполнится если ответ вернёт success:true
                    $('#right-card').html(data.html); // записываем в блок с айди #right-card, содержимое data.html
                },
            });

            // отменяем стандартное действие нажатия кнопки отправки формы
            event.preventDefault();
        });
    });

</script>

Метод контроллера по адресу роута check-word

MainController.php
public function check(Request $request){
        $word = $request->word;
        // сначала рендерим вью и записываем его в $html
        $html = view('table')->with(['word' => $word])->render();
        // возвращаем json с ответом success и отрендеренным вью
        return response()->json([
            'success' => true,
            'html' => $html
        ]);
    }

Last updated