⚡ Envíos asíncronos con Fetch

Aprende a enviar formularios usando FormData directo vs JSON (Object.fromEntries)

📌 Opción 1: Enviar como FormData Directo

¿Cómo funciona?
  • El objeto FormData se pasa tal cual al body del fetch.
  • No necesitas definir cabecera (Content-Type), el navegador la coloca automáticamente como multipart/form-data.
  • En PHP: Los datos llegan directo a la superglobal $_POST.
FRONTENDindex.html
<!-- Formulario Estándar -->
<form id="form1">
  <input type="text" name="nombre" required>
  <button type="submit">Enviar</button>
</form>

<script>
document.getElementById('form1').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  // 1. Capturamos el FormData
  const datos = new FormData(e.target);

  // 2. Enviamos directamente (Sin headers)
  const res = await fetch('procesar.php', {
    method: 'POST',
    body: datos 
  });

  const resultado = await res.json();
  console.log(resultado);
});
</script>
BACKENDprocesar.php
<?php
header('Content-Type: application/json');

// Recibimos directamente desde $_POST
$nombre = $_POST['nombre'] ?? '';

if (empty($nombre)) {
    echo json_encode([
        'status' => 'error',
        'msj' => 'Nombre vacío'
    ]);
    exit;
}

echo json_encode([
    'status' => 'success',
    'msj' => 'Recibido con $_POST',
    'usuario' => $nombre
]);
?>

📌 Opción 2: Enviar como JSON (Object.fromEntries)

¿Cómo funciona?
  • Transformamos el FormData a un objeto JS con Object.fromEntries() y lo convertimos a texto con JSON.stringify().
  • Es obligatorio colocar la cabecera 'Content-Type': 'application/json'.
  • En PHP: $_POST quedará vacío. Debes leer el cuerpo con file_get_contents('php://input') y usar json_decode().
FRONTENDindex.html
<!-- Formulario Estándar -->
<form id="form2">
  <input type="text" name="nombre" required>
  <button type="submit">Enviar</button>
</form>

<script>
document.getElementById('form2').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  // 1. Convertimos FormData a Objeto y luego a JSON
  const formData = new FormData(e.target);
  const datosObjeto = Object.fromEntries(formData.entries());

  // 2. Enviamos especificando Header application/json
  const res = await fetch('procesar.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(datosObjeto)
  });

  const resultado = await res.json();
  console.log(resultado);
});
</script>
BACKENDprocesar.php
<?php
header('Content-Type: application/json');

// 1. Leemos el flujo de entrada RAW (JSON)
$jsonRaw = file_get_contents('php://input');

// 2. Decodificamos a Array de PHP
$datos = json_decode($jsonRaw, true);

$nombre = $datos['nombre'] ?? '';

if (empty($nombre)) {
    echo json_encode([
        'status' => 'error',
        'msj' => 'Nombre vacío'
    ]);
    exit;
}

echo json_encode([
    'status' => 'success',
    'msj' => 'Recibido vía php://input',
    'usuario' => $nombre
]);
?>
Saber más sobre diferencias entre FormData y JSON