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

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

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

Шаг 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» , подготовленная редакцией проекта.

Меню