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

Меню