0 ∞ 4

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

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

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

Обновлено: 2025-09-02 23:04:13 Вадим Дворниковавтор материала

Шаг 1: добавляем маршруты
Шаг 2: создаем модель и файл миграции
Шаг 3: создаем контроллер
Шаг 4: создание Blade шаблона для формы запроса

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

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

Route::get('contact-form', 'ContactController@create');
Route::post('contact-form', 'ContactController@store');

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

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

php artisan make:model Contact -m

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

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

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateContactsTable extends Migration
{
    /**
     * Запуск миграций
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name')->nullable();
            $table->string('email')->nullable();
            $table->string('mobile_number')->nullable();
            $table->string('subject')->nullable();
            $table->text('message')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Отмена миграций
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

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

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

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

php artisan make:controller ContactController

Созданный контроллер находится в app/Http/Controllers/ContactController.php. Вставьте в него следующий код:

<?php 

namespace App\Http\Controllers; 
use Illuminate\Http\Request; 
use App\Contact; 

class ContactController extends Controller { 

     public function create() { 

      return view('contact_form'); 
     }  

     public function store(Request $request) { 
      $contact = new Contact;

      $contact->name = $request->name;
      $contact->email = $request->email;
      $contact->subject = $request->subject;
      $contact->mobile_number = $request->mobile_number;
      $contact->message = $request->message;

      $contact->save();
      
      return response()->json(['success'=>'Form is successfully submitted!']);

    }
}

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

На последнем этапе мы создаем шаблон Blade contact_form, он должен находиться в resources/views/contact_form.blade.php. Добавьте в него приведенный ниже код:

<html lang="en">
<head>
    <title>Laravel Ajax jquery Validation Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>

<div class="container panel panel-default ">
        <h2 class="panel-heading">Laravel Ajax jquery Validation</h2>
    <form id="contactForm">
        <div class="form-group">
            <input type="text" name="name" class="form-control" placeholder="Enter Name" id="name">
        </div>

        <div class="form-group">
            <input type="text" name="email" class="form-control" placeholder="Enter Email" id="email">
        </div>

        <div class="form-group">
            <input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile Number" id="mobile_number">
        </div>

        <div class="form-group">
            <input type="text" name="subject" class="form-control" placeholder="Enter subject" id="subject">
        </div>

        <div class="form-group"> 
          <textarea class="form-control" name="message" placeholder="Message" id="message"></textarea>
        </div>
        <div class="form-group">
            <button class="btn btn-success" id="submit">Submit</button>
        </div>
    </form>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

   <script>

    $('#contactForm').on('submit',function(event){
        event.preventDefault();

        let name = $('#name').val();
        let email = $('#email').val();
        let mobile_number = $('#mobile_number').val();
        let subject = $('#subject').val();
        let message = $('#message').val();

        $.ajax({
          url: "/contact-form",
          type:"POST",
          data:{
            "_token": "{{ csrf_token() }}",
            name:name,
            email:email,
            mobile_number:mobile_number,
            subject:subject,
            message:message,
          },
          success:function(response){
            console.log(response);
          },
         });
        });
      </script>
 </body>
</html>

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

Вадим Дворниковавтор-переводчик статьи «Laravel Form Submit Using Ajax Easy Example»

Антон Ф.

Удивительно.

Laravel вроде такой крутой фреймворк, а код для такой простой вещи как ajax нужно писать полностью вручную, включая переборку всех полей формы.

Кстати лучше тогда не jQuery использовать, а обычный JS и метод fetch:

async function fetch_post()
{
const params = {
name: name,
email: email,
mobile_number: mobile_number,
subject: subject,
message: message
};
let elem = document.querySelector('#result');
elem.innerHTML = "loading...";
let response = await fetch('/contact-form',
{
method: 'POST',
body: new URLSearchParams(params).toString()
});
let result = await response.text();
console.log(result);
}