Проверка выполнения AJAX запроса POST в Laravel
Проверка выполнения AJAX запросов в Laravel может быть непростой задачей, особенно при работе с POST-запросами. В статье мы расскажем, как эффективно тестировать и отлаживать такие запросы, используя встроенные возможности фреймворка.
Вы научитесь отслеживать ответы от сервера и правильно настроить обработку данных на стороне клиента, что сделает вашу работу с 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>Теперь все готово, можно запускать проект в браузере. Задавайте вопросы в комментариях к статье.
Комментарии