Laravel Ajax: как использовать Ajax в Laravel на примере

Чтобы использовать AJAX в Laravel, вам необходимо импортировать библиотеку jquery в файл представления, чтобы использовать функции jquery ajax, которые будут использоваться для отправки и получения данных с помощью ajax с сервера. На стороне сервера вы можете использовать функцию response () для отправки ответа клиенту, а для отправки ответа в формате JSON вы можете связать функцию ответа с функцией json ().

В последние пять лет Laravel является доминирующим фреймворком PHP. Сейчас на Laravel создается так много веб-приложений. Laravel Ecosystem совершает революцию в веб-приложении PHP .

До сих пор мы вставляли данные с обновлением страницы. Но теперь мы увидим, как мы можем использовать запрос AJAX для ввода данных в базу данных и их извлечения. Если вы новичок в Laravel , ознакомьтесь с моим Примером CRUD для Laravel 7 с нуля.

# Что такое AJAX

AJAX — это способ связи между клиентом и сервером без обновления страницы. Это метод передачи данных с одного сервера на другой без прерывания работы.

Полная форма AJAX — это асинхронный Javascript и XML . В обычной форме мы определяем маршрут публикации в действии, но в этом случае мы описываем действие в Javascript и позволяем коду javascript обрабатывать все остальное.

# Разница между обычным запросом и запросом AJAX.

Клиент отправляет запрос на сервер, сервер отвечает определенным страница, и эта страница содержит статические или динамические данные.

В запросе AJAX клиентский запрос к сервер, сервер отвечает данными, а не всей страницей. В этом основное различие между обычными запросами и запросами ajax.

Сервер возвращает данные в формате JSON или XML. В настоящее время все более популярным становится JSON .

Синтаксис jQuery ajax-запроса следующий.

 jQuery.ajax (url [,  settings]) 

Первый параметр — это URL-адрес, на который отправляется запрос.

Второй параметр — это настройки, которые представляют собой набор пар ключ/значение, которые настраивают Запрос Ajax. Все настройки необязательны.

Значение по умолчанию может быть установлено для любого параметра с помощью $ .ajaxSetup (). См. JQuery.ajax (настройки) ниже для получения полного списка всех настроек.

Пример Laravel AJAX

Чтобы использовать Ajax в Laravel, вам нужна библиотека JavaScript для отправки сетевого запроса без обновления страницы на сервер. Запрос ajax может быть GET, POST или другими допустимыми типами..

Если запрос POST, то с помощью метода jQuery ajax () или post () мы отправим запрос на сервер, чтобы сохранить значения формы в база данных.

Итак, давайте запустим это небольшое приложение, установив Laravel.

Шаг 1. Установите и настройте Laravel.

Вы можете установить Laravel с помощью следующей команды.

 composer create-project laravel/laravel laravel-ajax --prefer-dist 

После установки Laravel нам нужно настроить базу данных. Вы можете установить учетные данные своей базы данных в файле .env .

Мы создаем простое приложение для бакалеи, в которое пользователь может добавлять товар. Итак, сначала нам нужно разработать схему для этого. Для создания файла миграции нам нужно ввести следующую команду.

 php artisan make: migration create_groceries_table 

Итак, он сгенерировал файл миграции, теперь определите столбцы в этом файле.

 public function up () {Schema :: create ('groceries', function (Blueprint $ table) {$ table-> increments ('id'); $ table->  строка ('имя'); $ table-> string ('type'); $ table-> integer ('price'); $ table-> timestamps ();});  } 

Теперь перенесите таблицу в нашу базу данных.

 php artisan migrate 

Шаг 2: Определите маршруты, модели и контроллеры.

Чтобы создать модель и контроллер, нажмите следующие команды.

 php artisan make: model Groceryphp artisan make: controller GroceryController  

Следующим шагом является определение маршрутов. Нам нужно добавить маршруты в файл routes >> web.php .

//web.phpRoute :: view ('/grocery', 'grocery  '); Route :: post ('/grocery/post ',' GroceryController @ store '); 

До сих пор мы не создавали никаких файлов представления. Итак, давайте сделаем это. Нам нужно создать этот файл внутри файла resources >> views >> grocery.blade.php .

        Продуктовый магазин     Grocery App  

Перейдите в cmd и запустите сервер разработки .

 php artisan serve 

Перейдите к http://localhost: 8000/grocery . Вы можете увидеть нашу страницу с продуктами в браузер.

Шаг 3. Создайте форму начальной загрузки.

В grocery.blade.php напишите следующий код начальной загрузки.

        Продуктовый магазин     

Хорошо, теперь добавьте jQuery в файле grocery.blade.php . Помните, что вам нужно добавить файлы JS непосредственно над закрывающим тегом body . Я использовал CDN для jQuery. Вы можете использовать свой локальный файл jQuery .

   

Шаг 4. Настройте Ajax-запрос для Laravel.

Во-первых, нам нужно определить токен CSRF в нашем meta теге. В предыдущих случаях мы описывали поле под названием « {{csrf_field ()}} », но в нашем случае с ajax мы определили его в метатеге.

Когда мы настраиваем запрос ajax, нам также необходимо настроить заголовок для нашего токена csrf .

Когда мы отправляем данные на сервер, они должны содержать токен CSRF .

 jQuery (document) .ready  (function () {jQuery ('# ajaxSubmit'). click (function (e) {e.preventDefault (); $ .ajaxSetup ({заголовки: {'X-CSRF-TOKEN': $ ('meta [name = "  _token "] '). attr (' content ')}});});}); 

Итак, когда пользователь нажимает кнопку отправки, вызывается это событие click, а затем сначала мы предотвращаем отправку формы, а затем устанавливаем заголовки для нашего будущего запроса на публикацию.

Теперь добавьте функцию jQuery.ajax () в это событие щелчка, чтобы отправьте запрос на сервер со всеми тремя входными данными.

    jQuery (document) .ready (function () {jQuery ('().  д) {e.preventDefault (); $ .ajaxSetup ({заголовки: {'X-CSRF-TOKEN': $ ('meta [name = "_ token"]'). attr ('content')}}); jQuery  .ajax ({url: "{{url ('/grocery/post')}}", метод: 'post', данные: {name: jQuery ('# name'). val (), тип: jQuery ('  #type '). val (), price: jQuery (' # price '). val ()}, success: function (result) {console.log (result);}};});});  

jQuery.ajax () функция содержит объект параметров. Он содержит URL для отправки request , свойство method для проверки того, какой метод HTTP-запроса используется, объект данных, содержащий все данные формы.

success и Имеется функция error . Если наш запрос отправляется успешно, мы можем поймать ответ ned данные в функции успеха, и если она вызывает ошибку, мы можем поймать ошибку в функции ошибки.

Шаг 5: Напишите функцию хранения для хранения данных .

Переключитесь на файл GroceryController.php и добавьте следующий код.

//GroceryController.phpuse  Приложение  Бакалея;  публичное хранилище функций (запрос $ request) {$ grocery = new Grocery ();  $ бакалея-> имя = $ запрос-> имя;  $ бакалея-> тип = $ запрос-> тип;  $ бакалея-> цена = $ запрос-> цена;  $ бакалея-> сохранить ();  return response () -> json (['success' => 'Данные успешно добавлены']);  } 

Теперь нам нужно отобразить сообщение об успешном добавлении данных.

         Продуктовый магазин     
jQuery (документ) .ready (функция () {jQuery ('#ajaxSubmit'). click (function (e) {e.preventDefault (); $ .ajaxSetup ({заголовки: {'X-CSRF-TOKEN': $ ('meta [name = "_ token"]'). attr ('content')}}); jQuery.ajax ({url: "{{url ( '/grocery/post')}} ", метод: 'post', данные: {name: jQuery ('# name'). val (), тип: jQuery ('# type'). val (), цена: jQuery ('# цена'). val ()}, успех: функция (результат) {jQuery ('. alert'). show (); jQuery ('. alert'). html (result.success); }}); }); });

Итак, в случае успеха я отобразил сообщение об успешном добавлении данных.

Наконец, Наше учебное пособие по Laravel AJAX подошло к концу.

Рекомендуемые сообщения

Пример проверки Laravel

Как Экспорт данных в Laravel

Создать PDF в Laravel

Как перейти на Laravel

Оцените статью
nanomode.ru
Добавить комментарий