Проверка выполнения AJAX запроса POST в Laravel

Тема этого руководства – пример валидации AJAX запроса в Laravel. Запросы с применением метода POST очень часто используются на всех PHP фреймворках, а не только Laravel 8. В рамках данного руководства мы рассмотрим очень простой способ выполнения запроса AJAX к контроллеру Laravel с добавлением результатов в Blade шаблон. Сообщения сервера об успешной (или неудачной) обработке запроса будут отражаться на странице сайта.

Для обработки запроса AJAX нам потребуется добавление маршрутов; один метод будет возвращать результаты запроса к серверу, а второй будет обращаться к серверу с запросом javascript файла. Наш урок по AJAX запросу в Laravel 8 будет пошаговым. Кстати, если вам интересен способ отправки формы в Laravel 8 с использованием AJAX – руководство здесь.

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

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

php artisan make:model Contact -m

В результате этого мы получим два файла – один для модели, другой для миграции. В нашем примере файл миграции называется 2020_09_14_120412_create_contacts_table.php и размещается по следующему пути – database\migrations\2020_09_14_120412_create_contacts_table.php.

Откроем файл миграции и добавим в него приведенный ниже код, который отвечает за создание столбцов таблицы.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

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

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

Наш файл модели – app\Models\Contact.php. Определим заполняемые свойства с помощью приведенного ниже кода.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    use HasFactory;

    protected $fillable = [
      'name', 'email', 'mobile_number', 'subject', 'message'
    ];
}

Добавляем маршруты

Теперь добавим маршруты в файл web.php, который находится здесь – routes\web.php. Один маршрут показывает форму, второй сохраняет и отсылает запросы контроллера.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ContactController;

Route::get('contact', [ ContactController::class, 'create' ]);
Route::post('contact', [ ContactController::class, 'store' ]);
 
Route::get('/', function () {
    return view('welcome');
});

Добавим методы в контроллер

Теперь мы добавим два метода в контроллер Laravel. Если контроллера у вас еще нет, создайте его командой:

php artisan make:controller ContactController

Контроллер находится в файле ContactController.php, путь к нему – app\Http\Controllers\ContactController.php. Добавьте в этот файл приведенный ниже код.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Contact;

class ContactController extends Controller
{
  public function create()
  {

    return view('contact');
  }

  public function store(Request $request)
  {
      $request->validate([
          'name'          => 'required',
          'email'         => 'required',
          'subject' => 'required',
          'mobile_number' => 'required',
          'message'       => 'required',
      ]);

      Contact::create([
        'name' => $request->name,
        'email' => $request->email,
        'subject' => $request->subject,
        'mobile_number' => $request->mobile_number,
        'message' => $request->message,
      ]);

      return response()->json(['success'=>'Contact form submitted successfully']);
  }
}

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

Файл называется contact.blade.php и располагается по адресу resources\views\contact.blade.php. Откройте его и вставьте в него следующий код:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Ajax Post Request Example</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
</head>

<body>
    <div class="container">
        <h1>Laravel Ajax Post Request Example with <a href="https://codingdriver.com/">Coding Driver</a></h1>
          <span class="success" style="color:green; margin-top:10px; margin-bottom: 10px;"></span>
        <form id="contactform">
            <div class="form-group">
                <label>Name:</label>
                <input type="text" name="name" class="form-control" placeholder="Enter Name">
                <span class="text-danger" id="nameError"></span>
            </div>

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

            <div class="form-group">
                <label>Subject:</label>
                <input type="text" name="subject" class="form-control" placeholder="Enter subject">
                <span class="text-danger" id="subjectError"></span>
            </div>

            <div class="form-group">
                <strong>Mobile Number:</strong>
                <input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile">
                <span class="text-danger" id="mobileNumberError"></span>
            </div>
            <div class="form-group">
                <strong>Message:</strong>
                <textarea name="message" class="form-control" placeholder="Enter Your Message"></textarea>
                <span class="text-danger" id="messageError"></span>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-success save-data" onclick="submitForm()">Save</button>
            </div>
        </form>
    </div>
</body>
</html>

Создаем запрос AJAX

Код запроса AJAX jQuery, использующий метод POST, мы добавим в файл contact.blade.php, сразу после последнего закрывающего тэга </div>.

<script>
    function submitForm() {
      let name = $("input[name=name]").val();
      let email = $("input[name=email]").val();
      let subject = $("input[name=subject]").val();
      let mobile_number = $("input[name=mobile_number]").val();
      let message = $("textarea[name=message]").val();
      let _token   = $('meta[name="csrf-token"]').attr('content');

      $.ajax({
        url: "/contact",
        type:"POST",
        data:{
          name:name,
          email:email,
          subject:subject,
          mobile_number:mobile_number,
          message:message,
          _token: _token
        },
        success:function(response) {
          console.log(response);
          if(response) {
            $('.success').text(response.success);
            $("#contactform")[0].reset();
          }
        },
        error:function (response) {
          console.log(response.responseJSON.errors);
          $('#nameError').text(response.responseJSON.errors.name);
          $('#emailError').text(response.responseJSON.errors.email);
          $('#subjectError').text(response.responseJSON.errors.subject);
          $('#mobileNumberError').text(response.responseJSON.errors.mobile_number);
          $('#messageError').text(response.responseJSON.errors.message);
        }
       });

    }
</script>

Теперь все готово, можно запускать проект в браузере. Задавайте вопросы в комментариях к статье.

Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, отклики, подписки, дизлайки, лайки низкий вам поклон!

Данная публикация является переводом статьи «Ajax Post Request Laravel 8 with Validation Example» , подготовленная редакцией проекта.

Меню