Olá! Usando Laravel 9, consigo enviar os dados de um formulário para um controller e deste para uma outra view. Eu gostaria entretanto fazer isso usando AJAX e Alpine JS, ou seja, enviar os dados do formulário para o controller e mostrar o resultado na mesma view sem a necessidade de recarregar a página.
Aqui estão os 4 arquivos da solução que funciona sem AJAX:
routes: web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DataController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::middleware(['auth', 'verified'])->group(function () {
Route::get('/', function () {
return view('dashboard');
})->name('dashboard');
Route::post('/test', [DataController::class, 'test']);
});
require __DIR__.'/auth.php';
DataController.php
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class DataController extends Controller
{
public function test(Request $request)
{
// check all data dumped from the form
// dd($request->all());
$name = $request->name;
$email = $request->email;
$message = $request->message;
return view('test', [
'name' => $name,
'email' => $email,
'message' => $message,
]);
}
}
Aqui temos a view dashboard.blade.php que contém um formulário que envia informações para o controller.
dashboard.blade.php
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<form action="/test" method="POST" class="w-64 mx-auto">
@csrf
<div class="mb-4">
<label class="block mb-2">Name:</label>
<input type="text" name="name" class="border w-full p-1">
</div>
<div class="mb-4">
<label class="block mb-2">E-mail:</label>
<input type="email" name="email" class="border w-full p-1">
</div>
<div class="mb-4">
<label class="block mb-2">Message:</label>
<textarea name="message" class="border w-full p-1"></textarea>
</div>
<button class="bg-gray-700 hover:bg-gray-800 text-white w-full p-2">Submit</button>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>
E temos a view test.blade.php que é basicamente uma cópia do dashboard.blade.php sem o formulário, mas com o placeholder que vai receber e imprimir os valores passados do formulário para o controller e deste para a view test.blade.php.
test.blade.php
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Test') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
{{ $name }}
{{ $email }}
{{ $message }}
</div>
</div>
</div>
</div>
</x-app-layout>
Agora estou trabalhando no dashboard.blade.php que necessita modificação para funcionar com o AJAX e Alpine JS.
Eu basicamente acrescentei x-data="contactForm()"
e @submit.prevent="submitData"
na tag <form>
e x-model
nos <input>
.
Além disso acrescentei o <script>
que vai tratar os dados do formulário e enviá-los para o controller.
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Dashboard') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<form action="/test" method="POST" class="w-64 mx-auto" x-data="contactForm()">
@csrf
<div class="mb-4">
<label class="block mb-2">Name:</label>
<input type="text" name="name" class="border w-full p-1" x-model="formData.name">
</div>
<div class="mb-4">
<label class="block mb-2">E-mail:</label>
<input type="email" name="email" class="border w-full p-1" x-model="formData.email">
</div>
<div class="mb-4">
<label class="block mb-2">Message:</label>
<textarea name="message" class="border w-full p-1" x-model="formData.message"></textarea>
</div>
<button class="bg-gray-700 hover:bg-gray-800 text-white w-full p-2">Submit</button>
</form>
<script>
function contactForm() {
return {
formData: {
name: '',
email: '',
message: ''
},
submitData() {
fetch('/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(this.formData)
})
.then(() => {
console.log('Form sucessfully submitted!');
})
.catch(() => {
console.log('Ooops! Something went wrong!');
})
}
}
}
</script>
</div>
</div>
</div>
</div>
</x-app-layout>
No momento eu recebo o erro:
POST http://localhost/test 419 (unknown status)
Failed to load resource: the server responded with a status of 419 (unkown status)
A linha problemática do script inicia-se com fetch ('/test') {
Agora como eu faço para "pegar" as informações do controller de volta para a view dashboard.blade.php?