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