Как использовать ajax в laravel

Простой пример отправки формы в Laravel через AJAX jQuery

Сегодня мы рассмотрим, как отправить форму в Laravel, используя AJAX jQuery с одновременной проверкой данных. В данном руководстве объясняется процедура обработки формы через запрос AJAX jQuery и сохранение информации в таблице базы данных. Давайте сразу перейдем к отправке данных методом POST.

В нашем примере данные сохраняются в БД без перезагрузки страницы. В Laravel предусмотрено обновление страницы при отправке данных, – чтобы этого избежать, мы используем запрос AJAX.

Шаг 1: добавляем маршруты

Прежде всего, добавим два маршрута в файл routes/web.php :

Шаг 2: создаем модель и файл миграции

После выполнения приведенной ниже команды автоматически будут созданы файлы модели и миграции:

Модель формы « Контакты » находится в директории app ( app/Contact.php ), а файл миграции в нашем примере располагается в каталоге database/migrations/2019_09_02_161223_create_contacts_table.php.

Добавьте в файл миграции приведенный ниже код:

Шаг 3: создаем контроллер

Перейдем к созданию контроллера для обработки запроса на стороне сервера. В контроллер мы вставим два метода – один отвечает за отображение формы « Контакты », а второй – за сохранение введенных в нее данных в БД.

Выполните в командной строке следующую команду:

Шаг 4: создание Blade шаблона для формы запроса

Все готово к запуску в браузере – обработка данных из формы этим методом не требует обновления и перезагрузки страницы. Обращайтесь в комментарии в случае затруднений.

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, дизлайки, лайки!

Источник

Все о WEB программировании

WEB программирование от А до Я

Заказать сайт:

Социальные сети:

Партнеры:

Использование AJAX запросов в Laravel

Доброго времени суток. Очень часто при разработке проекта мы сталкиваемся с отправкой ajax запросов. В данной статье мы поговорим, как правильно реализовать отправку ajax запросов в Laravel.

И так приступим. У меня установлен Laravel 5.5.13

Настройка подключения к базе данных

В моем случае секция с настройками подключения к базе данных:

Создание миграции в Laravel

Давайте создадим миграцию create_articles_table, которая будет создавать таблицу в базе данных articles с полями:

Для этого выполним в консоли следующую команду:

Теперь в метод up нашей только что созданной миграции (database/migrations/ _ _create_articles_table.php) добавим следующий код:

И запускаем процесс миграции:

Отлично, миграция выполнена. Если перейдем в нашу базу данных, то увидим, что создана (помимо таблиц: migrations, password_resets и users) таблица articles.

Создание модели в Laravel

Теперь нам нужно создать модель для работы с нашей таблицей articles. Для этого выполним в консоли следующую команду:

И добавим в нашу модель (app/Article.php) следующий код:

Создание контроллера в Laravel

Теперь давайте создадим контроллер ресурсов:

Добавим роуты к этому контроллеру. Открываем файл routes/web.php и добавляем:

И давайте в методе index контроллера ArticleController добавим для теста:

Перейдем /article. В моем случае это http://lara.loc/article

Вывод всех статей.

За вывод всех статей отвечает метод index контроллера ArticleController. Давайте опишем его:

Мы получаем все записи из таблицы articles (но получаем только поля id и title) и передаем все в шаблон index.blade.php и не забываем добавить:

Давайте создадим шаблон index.blade.php в каталоге resources/view и поместим в него следующий код:

Проверяем, что получилось.

Все работает. У нас записей в таблице пока нет. Давайте реализуем метод добавления статьи.

Добавление статьи с помощью ajax запроса

На странице со списком статей у нас есть кнопка, при нажатии на которую появляется модальное окно.

В данном окне мы вводим данные новой статьи. А при нажатии кнопки «Сохранить» передаем данные с помощью ajax для сохранения.

Давайте напишем JavaScript, который при клике по «Сохранить» будет отправлять ajax запрос на адрес /article (в моем случае http://lara.loc/article), а данные передавать методом POST.

Первое, что сделаем – это добавим к кнопке «Сохранить» И напишем небольшой код на JavaScript. В конце файла index.blade.php, после подключения скриптов, добавим:

Думаю, что код пояснять не нужно. Просто тут мы передаем методом POST две переменные title и text на адрес, который определяем по имени роута.

Теперь давайте опишем метод контроллера, который вызывается этим роутом (в нашем случае это контроллер ArticleController и метод store). Добавим в метод store следующий код:

Можем проверять. Давайте создадим первую статью.

Статья добавлена. Если мы откроем нашу таблицу в базе данных, то увидим запись.

Давайте реализуем просмотр статьи.

Просмотр статьи

Для просмотра статьи у нас есть метод show контроллера ArticleController, давайте добавим следующий код:

Мы в базе ищем статью по ее id, и все возвращаем в шаблон show.blade.php. Давайте создадим шаблон show.blade.php и добавим в него следующий код. (Напомню, что шаблон, в нашем случае, должен находиться в resources/view)

Давайте проверим. На странице со списком статей кликаем по ссылке с названием статьи:

Отлично. По нашей задаче осталось реализовать только удаление статьи.

Удаление статьи методом ajax.

За удаление статьи у нас отвечает метод destroy контроллера ArticleController. Давайте опишем этот метод.

Источник

Создание CRUD-операций на AJAX и Laravel 8: руководство для начинающих с примерами

В этой статье мы представим простое пошаговое руководство для новичков по созданию набора CRUD (операции создания, чтения, обновления и удаления) на AJAX и Laravel 8.

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

Приступим к поэтапному созданию набора операций CRUD на AJAX и Laravel 8.

Сначала установим Laravel с помощью простой команды:

Вносим конфигурацию базы данных в файл переменных окружения

Создаем модель и файл миграции

Для автоматического создания модели и файла миграции используйте команду:

После выполнения данной команды вы получите один файл модели (Post.php) и один файл миграции.

Миграция: обновите столбцы таблицы в файле миграции, как показано ниже. В нашем примере файл находится здесь – database\migrations\2021_03_21_061250_create_posts_table.php

После обновления выполните команду:

Модель: в файл Post.php добавьте заполняемое свойство, как в примере ниже:

Обновление маршрута

Теперь обновим маршруты для Laravel 8 CRUD в файле routes/web.php, как показано ниже:

Создаем контроллер

Перейдем к созданию контроллера PostController с помощью команды:

После создания файла контроллера (app/Http/Controllers/PostController.php) добавьте в него приведенные ниже методы:

Создаем шаблон Blade

Для начала создайте файл posts.blade.php, он должен располагаться по адресу resources\views\posts.blade.php. Затем добавьте в него следующий код:

Добавим модель

После последнего закрывающего тэга

Добавление AJAX запроса через Jquery

Дополним CRUD набор на Laravel 8 и AJAX приведенным ниже кодом – после закрывающего тэга

Источник

Laravel 8 Ajax Example Tutorial: How to Use Ajax in Laravel

Laravel AJAX Example

AJAX is primarily used to make flawless HTTP requests to read, write, update, and delete the data from the server. AJAX is a tool that makes the consensus between the client and the server.

The usage of AJAX is from the primordial time, obviously from the web development perspective.

AJAX is used through jQuery, and a simple jQuery link can propel it. The jQuery offers excellent features, and AJAX is one of them.

Laravel has always been the best PHP framework, possibly you may have a different opinion, but current data of the sites built with this framework interprets a lot about itself.

PHP drives laravel, and it has been assimilated in Laravel, making its entire mechanism simple yet powerful. From the PHP Web application development perspective, You may also say that it makes it robust.

AJAX in Programming

We can also denote it by Asynchronous JavaScript and XML. It is a powerful tool ultimately used in web development on the client-side to build asynchronous web applications. With it, web applications can make HTTP requests and used for sending and retrieving the data to a web server asynchronously (mainly a background process). The exclusivity lies in its core. It doesn’t interfere with the existing web page, and that what it stands out to do.

Table of Contents

Install Laravel Project

We have to run the given below command to install a fresh Laravel application, this app will be the sacred canon for Laravel Ajax example.

Head over to project directory, or you can simultaneously execute following command with above command followed by double && symbol.

Make Database Connection

If you are using MAMP, then you might possibly get the following migration error.

Paste the following line right after the database configuration inside the .env.

Create & Configure Model and Migration

We are creating a simple to-do application, this allows user to insert, read, update or delete the data from the database using AJAX requests.

In the model, we define the schema that communicates with the database. Whereas, migration set out to generate tables with values that interact with the model.

The above command simultaneously created both Model and Migration file.

Add Values in Model

To set up the data values to the database, open app/Models/Todo.php and place the following code.

Configure and Run Migration

To set up the data values to the database, open migrations/xxxx_xx_xx_xxxxxx_create_todos_table.php and place the following code.

Run Migration

We have added name and description values respectively and consecutively. Now, we have to define the todo app values within the up() function, so when we run the migration, then all the set values can be seen in the database.

Create Controller

Execute the following command to create the controller for handling CRUD logic.

Paste the following code in the newly created controller in app/Http/Controllers/CrudController.php file.

Generically, create two functions here, and these functions propel the Laravel AJAX example. The index function renders all the records from the database, and preferably store method saves the data record in the database.

Create Routes

Define route; it is one of the foundational steps that directly communicates with the controller that we created earlier, open routes/web.php, and paste the following code.

Create Layout

Let us create the view for showing you how to use AJAX in the Laravel application precisely. Head over to resources/views folder and create home.blade.php file.

After creating the recommended file, also create views/layouts/app.blade.php file and folder. Add the following code inside the app.blade.php file.

Make Ajax request in Laravel

First, we have to create the table layout and modal popup with form using Bootstrap. These two foundational elements are useful in propelling the AJAX request in Laravel to render or store the data in the database.

Insert the following code in views/home.blade.php file.

AJAX Logic in Laravel

Now, we need to create a todo.js file inside the public/js folder. Place the entire code in it.

Test Laravel AJAX App

You need to start the application by executing the below command:

You can test the app on the following URL: http://127.0.0.1:8000/todo

You can check out the working example of Laravel and AJAX application.

Add Data

List View

Conclusion

In this tutorial, we created a simple Laravel application. We looked at the simple example that described us how to use AJAX in Laravel to make HTTP requests to fetch and add the data in the MySQL database.

Well, this is just a beginning; this framework offers tremendous flexibility to create enterprise-level applications.

I hope you liked this tutorial, please share this tutorial with other developers likewise help me to bring more content like this.

Thanks and have a good day.

I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.

Источник

Как загрузить изображение через Ajax (используя Laravel в качестве бэкэнда)

Что мы будем делать

У пользователя есть фотография профиля по умолчанию.

Пользователь нажимает на фотографию своего профиля, и у него появляется возможность выбрать новую фотографию ( при этом он может нажать кнопку отмены, и ничего не произойдет).

Если пользователь выбирает изображение, то изображение его профиля обновляется сразу же (нет необходимости перезагружать страницу, изменения сохраняются).

Как мы будем это делать

У нас есть много способов это реализовать.

В данном случае мы сделаем это следующим образом:

Погнали

Форма будет скрыта с помощью свойства CSS под названием display (со значением none).

В данном случае я размещаю ее непосредственно перед изображением.

Что на счет Javascript?

Как я уже говорил, нам нужно зарегистрировать 2 события. А также получить данные об элементах.

Как вы могли заметить, в событии изменения input я поместил только одно оповещение.

На этом этапе вы должны убедиться, что получили это сообщение, после нажатия на изображение и выбора файла.

Если все в порядке, то вы можете заменить оповещение для выполнения Ajax-запроса.

Таким образом, мы получим следующее:

Здесь мы должны помнить, что:

Нам нужно зарегистрировать только путь profile/photo (который мы использовали в action формы). При желании вы можете использовать другой путь.

Этот маршрут должен быть объявлен в файле Laravel routes.

В этом случае маршрут определяется через контроллер под названием ProfileController. В частности, через метод updatePhoto.

Таким образом, в этом контроллере у нас будет следующее:

Чтобы приведенный выше код работал правильно, необходимо, чтобы в таблице пользователей был столбец photo_extension.

Вам также необходимо определить метод getAvatarUrl в модели User.

Этот метод возвращает абсолютный URL-адрес изображения профиля пользователя. А в случае, если его нет, абсолютный URL-адрес изображения по умолчанию.

Если вы еще не установили пакет Intervention/Image (необходимый для работы изменения размера изображения), вы можете установить его, просто выполнив команду:

Кстати. Если вы достаточно внимательны, то могли заметить использование uniqid() в методе updatePhoto. Этот метод используется для добавления уникального номера в конец имени файла, чтобы пользователь всегда видел свою новую фотографию профиля (поскольку ранее он мог загрузить изображение с тем же названием, которое сохранилось в кэше браузера).

Источник