Enviar datos a PHP usando AJAX
En este post vamos a ver cómo enviar un formulario de HTML a PHP pero sin recargar la página, simplemente usando AJAX.
Recordemos que AJAX es una técnica que permite enviar y recibir datos de manera asíncrona, sin bloquear el hilo principal, además de ahorrar ancho de banda pues solo cargamos lo que se necesita.
Preparando el formulario
Vamos a comenzar con un formulario sencillo. Como vamos a obtener los datos de cada input de manera separada, no sería necesario usar la etiqueta form, pero lo dejamos de igual manera para identificarlo.
<!doctype html>
<html lang="es">
<!--
Envío de formulario usando AJAX y PHP
https://parzibyte.me/blog
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="Formulario de login con Bootstrap">
<meta name="author" content="Parzibyte">
<title>Enviar formulario AJAX con PHP</title>
</head>
<body>
<h2>Enviar formulario</h2>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<form>
<label for="nombre">Nombre</label>
<br>
<input id="nombre" name="nombre"
class="form-control" type="text"
placeholder="Nombre">
<br><br>
<label for="correo">Correo</label>
<br>
<input id="correo" name="correo"
class="form-control" type="email"
placeholder="Correo electrónico">
<br><br>
<label for="edad">Edad</label>
<br>
<input id="edad" name="edad"
class="form-control" type="number"
placeholder="Edad">
<br><br>
<div id="respuesta">
</div>
<button id="btnEnviar" type="button">
Enviar
</button>
</form>
<script src="./script.js"></script>
</body>
</html>Lo que hacemos es definir 3 campos para introducir valores (cada uno tiene su identificador) así como un div para poner la respuesta, y un botón para enviar el formulario.
Si visitamos el formulario se ve así:
Enviar formulario usando AJAX (bueno, fetch)
Ahora le vamos a dar funcionamiento con JavaScript. Vamos a hacer que en el click del botón se envíe un objeto con todo el formulario. El script queda así:
const $nombre = document.querySelector("#nombre"), // los 3 input
$correo = document.querySelector("#correo"),
$edad = document.querySelector("#edad"),
$btnEnviar = document.querySelector("#btnEnviar"), // El botón que envía el formulario
$respuesta = document.querySelector("#respuesta"); // el div que muestra mensajes
// Agregar listener al botón
$btnEnviar.addEventListener("click", () => {
// Poner un estado de "enviando"
$respuesta.textContent = "Cargando...";
// Armar objeto con datos
const datos = {
nombre: $nombre.value,
correo: $correo.value,
edad: $edad.value,
};
// Codificarlo como JSON
const datosCodificados = JSON.stringify(datos);
// Enviarlos
fetch("./procesar.php", {
method: "POST", // Enviar por POST
body: datosCodificados, // En el cuerpo van los datos
})
.then(respuestaCodificada => respuestaCodificada.json()) // Decodificar JSON que nos responde PHP
.then(respuestaDecodificada => {
// Aquí ya tenemos la respuesta lista para ser procesada
$respuesta.textContent = respuestaDecodificada;
});
});Lo que hacemos es obtener una referencia a los input, al botón y al div usando querySelector. En el click del botón creamos un objeto con los datos del formulario (se obtienen a través de la propiedad value) y los enviamos al archivo procesar.php usando fetch.
Se supone que PHP nos debe devolver un JSON, por eso en la línea 25 decodificamos el JSON y finalmente colocamos la respuesta en el div.
Procesar formulario con PHP
En el servidor decodificamos lo que haya en el cuerpo de la petición, recuerda que usamos json_decode porque nos enviaron un JSON desde JavaScript.
Cuando hemos decodificado con JSON podemos acceder a las propiedades del objeto usando el operador ->; en este caso los datos se guardan en un archivo de texto pero bien podrían ser guardados en una base de datos.
<?php
$datos = json_decode(file_get_contents("php://input"));
// Aquí podemos procesar los datos
$nombre = $datos->nombre;
$correo = $datos->correo;
$edad = $datos->edad;
file_put_contents("datos.txt", "Nombre: $nombre, Correo: $correo, Edad: $edad\n", FILE_APPEND);
echo json_encode("Formulario enviado");
Finalmente hacemos un echo de una cadena, codificándola como JSON.
Probando formulario AJAX
El funcionamiento es sencillo. En el click del botón se obtienen los valores, los mismos se envían usando AJAX. Después PHP los recibe y procesa, para finalmente mostrar la respuesta que es devuelta a JavaScript para mostrarla en el div.
De manera adicional deberíamos limpiar los input o validarlos, ya sea del lado del cliente o del servidor, pero evité eso para hacer este ejemplo lo más simple posible.
Bonus: formulario con Bootstrap y AJAX
Si agregamos un poco de clases de Bootstrap al formulario presentado anteriormente queda un diseño aceptable. Solo se cambia la vista, así que el HTML queda así:
<!doctype html>
<html lang="es">
<!--
Envío de formulario usando AJAX y PHP
https://parzibyte.me/blog
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="Formulario de login con Bootstrap">
<meta name="author" content="Parzibyte">
<title>Enviar formulario AJAX con PHP</title>
<!-- Cargar el CSS de Boostrap-->
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<main role="main" class="container my-auto">
<div class="row">
<div class="col-lg-4 col-12">
<h2 class="text-center">Enviar formulario</h2>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<form>
<div class="form-group">
<label for="nombre">Nombre</label>
<input id="nombre" name="nombre"
class="form-control" type="text"
placeholder="Nombre">
</div>
<div class="form-group">
<label for="correo">Correo</label>
<input id="correo" name="correo"
class="form-control" type="email"
placeholder="Correo electrónico">
</div>
<div class="form-group">
<label for="edad">Edad</label>
<input id="edad" name="edad"
class="form-control" type="number"
placeholder="Edad">
</div>
<div id="respuesta" class="alert alert-success">
</div>
<button id="btnEnviar" type="button" class="btn btn-primary mb-2">
Enviar
</button>
</form>
</div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>Cargamos el estilo de Bootstrap, y dejamos los ids intactos. Ahora se ve así:
Conclusión
Solo recuerda que ya no se necesita poner cada dato dentro de un formulario, pues en realidad enviamos un objeto JSON; esto da la ventaja de que puedes reducir código y obtener datos de formularios separados.
trate de ponerlo en un input pero no lo hace