-1

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?

1 Resposta 1

-2

Você não está enviando o token, adicione a meta tag

<meta name="csrf-token" content="{{ csrf_token() }}" />

E no headers adicione X-CSRF.

fetch({{ route("test") }}, {
  method: 'POST',
  headers: {
   'Content-Type': 'application/json',
   'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content
  },
 body: JSON.stringify(this.formData)
})```
1
  • 1
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 6/10/2022 às 18:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .