Symfony 4 AJAX表单提交：如何处理接收数据并写入数据库

Hey there! Let's walk through how to properly handle your AJAX form submission in Symfony—from receiving the data to writing it to the database. I'll break this down step by step based on common code patterns for this scenario.

Step 1: Fix the Twig Template (Ensure CSRF Protection & Proper Structure) #

First, make sure your form includes Symfony's CSRF token (critical for security) and uses clear name attributes that your controller can reference. Here's an example for both raw HTML and Symfony's built-in form component:

Raw HTML Form (Twig) #

{# templates/form/ajax-form.html.twig #}
<form id="ajax-form">
    <div class="form-group">
        <label for="full-name">Full Name</label>
        <input type="text" class="form-control" id="full-name" name="user[name]" required>
    </div>
    <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" class="form-control" id="email" name="user[email]" required>
    </div>
    <!-- CSRF Token: Required for all Symfony POST requests -->
    <input type="hidden" name="_token" value="{{ csrf_token('ajax_form_submit') }}">
    <button type="submit" class="btn btn-primary">Submit via AJAX</button>
</form>
<div id="ajax-response" class="mt-3"></div>

Symfony Form Component Version #

If you're using Symfony's form system, render the form normally and add an ID to target it with JS:

{{ form_start(form, {'id': 'ajax-form'}) }}
{{ form_widget(form) }}
<button type="submit" class="btn btn-primary">Submit via AJAX</button>
{{ form_end(form) }}

Step 2: Update Your JavaScript to Send Data Correctly #

Your JS should prevent default form submission, collect data, and send it with the CSRF token. Here's a robust fetch implementation:

// public/js/ajax-form-handler.js
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('ajax-form');
    const responseDiv = document.getElementById('ajax-response');

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        // Collect all form data (including CSRF token)
        const formData = new FormData(form);

        // Send request to the controller route
        fetch(form.action || '{{ path('submit_ajax_form') }}', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) throw new Error('Request failed');
            return response.json();
        })
        .then(data => {
            if (data.success) {
                responseDiv.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                form.reset(); // Clear form on success
            } else {
                const errorHtml = data.errors 
                    ? Object.values(data.errors).map(err => `<p>${err}</p>`).join('')
                    : `<p>${data.message}</p>`;
                responseDiv.innerHTML = `<div class="alert alert-danger">${errorHtml}</div>`;
            }
        })
        .catch(error => {
            responseDiv.innerHTML = `<div class="alert alert-danger">Oops! ${error.message}</div>`;
            console.error('Submission error:', error);
        });
    });
});

Step 3: Handle the AJAX Request in Your Symfony Controller #

This is the core part: receiving data, validating it, and writing to the database. We'll use Symfony's Request object, validator, and Doctrine ORM.

Controller Code #

// src/Controller/AjaxFormController.php
namespace App\Controller;

use App\Entity\User; // Replace with your actual entity
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Validator\Validator\ValidatorInterface;

class AjaxFormController extends AbstractController
{
    #[Route('/submit-ajax-form', name: 'submit_ajax_form', methods: ['POST'])]
    public function submit(
        Request $request,
        EntityManagerInterface $em,
        ValidatorInterface $validator
    ): JsonResponse {
        // 1. Validate CSRF Token first (critical security step)
        if (!$this->isCsrfTokenValid('ajax_form_submit', $request->request->get('_token'))) {
            return new JsonResponse([
                'success' => false,
                'message' => 'Invalid security token.'
            ], 403);
        }

        // 2. Extract form data from the request
        $userData = $request->request->get('user');

        // 3. Populate your entity with data
        $user = new User();
        $user->setName($userData['name']);
        $user->setEmail($userData['email']);

        // 4. Validate the entity (optional but highly recommended)
        $errors = $validator->validate($user);
        if (count($errors) > 0) {
            $errorMessages = [];
            foreach ($errors as $error) {
                $errorMessages[$error->getPropertyPath()] = $error->getMessage();
            }

            return new JsonResponse([
                'success' => false,
                'message' => 'Validation failed.',
                'errors' => $errorMessages
            ], 400);
        }

        // 5. Save to database
        $em->persist($user);
        $em->flush();

        // 6. Return success response to frontend
        return new JsonResponse([
            'success' => true,
            'message' => 'User created successfully!',
            'user' => [
                'id' => $user->getId(),
                'name' => $user->getName(),
                'email' => $user->getEmail()
            ]
        ]);
    }
}

Key Tips & Debugging Tricks #

• CSRF Protection: Never skip this—it prevents cross-site request forgery attacks.
• Request Restriction: Always limit your controller route to POST (or PUT/PATCH for updates) using the methods attribute.
• JSON Alternative: If you prefer sending JSON instead of FormData, adjust your JS to stringify data and set Content-Type: application/json, then parse it in the controller with json_decode($request->getContent(), true).
• Debugging: Use Symfony's profiler (/profiler) to inspect request data, or add dump($request->request->all()) in the controller to see exactly what's being sent.

内容的提问来源于stack exchange，提问作者Sander Bakker