👺
Cheatsheet
  • 👋My cheatsheet
  • 🐘PHP
    • Тернарные операторы
    • Замыкания в PHP
    • Таблица сравнения типов PHP
  • 🟨JS
    • JS cheat sheet
    • Тернарные операторы || ?? &&
    • Таблица сравнения типов JS
    • Область видимости в JS
    • Перебор объектов через for(key in obj)
    • Доступ к свойству через переменную []
    • this в JS
    • Конструктор, оператор "new"
    • bind привязка контекста (this)
    • Замыкания в JS ...
  • ❤️Laravel
    • Laravel websockets
    • Загрузка файлов и пути к ним
    • Vite сборка изображений
    • Vite сборка CSS и JS
    • Vite подключение jQuery
    • Vite подключение Bootstrap
    • Laravel AJAX (with jQuery)
    • Дерево категорий Laravel
    • Laravel + CK-Editor + El FInder
    • Laravel deploy
    • Laravel фасады и сервис провайдеры
    • Отношения
      • Один-к-Одному
      • Один-ко-Многим
      • Многие-ко-Многим
      • Полиморфные отношения
    • Laravel cheatsheet (MAIN)
    • Laravel cheatsheet (BIG)
      • Artisan
      • Auth
      • Blade
      • Cache
      • Composer
      • Config
      • Container
      • Cookie
      • DB
      • Environment
      • Event
      • Eloquent Model
      • File
      • Form
      • HTML
      • Helper
      • Input
      • Lang
      • Log
      • Mail
      • Pagination
      • Queue
      • Redirect
      • Request
      • Response
      • Route
      • SSH
      • Schema
      • Security
      • Session
      • String
      • URL
      • UnitTes
      • Validation
      • View
    • Laravel cheatsheet (BIG PLAIN)
  • 📕PDO
    • SELECT
    • WHERE
    • INSERT
    • UPDATE
    • DELETE
    • JOIN
    • GROUP BY
    • Дерево
    • Дерево ООП
    • Дерево в массив
  • 🐋Docker
    • Docker hub push
    • Docker offline
  • 🥤Gulp
  • 🌊jQuery
  • 🪄Composer
  • 4️⃣Composer PSR-4
  • 🍥RegEx
  • 🐙Git
  • 🧑‍💻Node js
  • 🛍️PHPStorm
  • 💻Zsh
  • 🤖Arduino
Powered by GitBook
On this page
  1. Laravel

Laravel AJAX (with jQuery)

Last updated 2 years ago

Настроить 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
        ]);
    }
❤️
Vite подключение jQuery