Acabamos de ver cómo hacer una petición HTTP GET usando AJAX, jQuery y PHP. Ahora veremos cómo enviar un formulario con jQuery usando AJAX, procesarlo con PHP y recibir la respuesta de nuevo del lado del cliente.
Para lograr esto, usaremos el método $.post y la librería de jQuery.
Nota: recuerda que puedes hacer esto sin jQuery.
Primero: el formulario
El archivo que tiene la vista es el siguiente, y está basado en una plantilla de Bootstrap 4.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="description" content="Envío de formulario a PHP usando AJAX
y jQuery">
<meta name="author" content="Parzibyte">
<title>Envío de formulario a PHP usando AJAX y jQuery</title>
<!-- Cargar el CSS de Boostrap-->
<link href="bootstrap.min.css" rel="stylesheet">
</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="https://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="jquery-3.4.1.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
Dentro del archivo, además de definir el formulario que será enviado por AJAX, cargamos la librería de jQuery y un script.
Fíjate en que cada input tiene un id, y que también tenemos un div con el id respuesta.
El script que envía el formulario con jQuery
Ahora veamos el script. En la parte superior he definido las variables del DOM, es decir, el div y los input; todo es obtenido a través de su id.
Esperamos a que el documento esté listo, recuperamos los datos de cada input (con val()) y creamos un objeto que enviamos al archivo procesar.php usando el método $.post.
$(document).ready(function() {
const $nombre = $("#nombre"),
$correo = $("#correo"),
$edad = $("#edad"),
$btnEnviar = $("#btnEnviar"),
$respuesta = $("#respuesta");
$btnEnviar.click(function() {
// Poner estado de "cargando"
$respuesta.html("Cargando...");
$.post("./procesar.php", {
nombre: $nombre.val(),
correo: $correo.val(),
edad: $edad.val(),
}, function(respuestaComoJson) {
// La decodificamos
let respuesta = JSON.parse(respuestaComoJson);
$respuesta.html(respuesta);
})
});
});
Presta atención a la línea 10, en ella, colocamos un “cargando” en la respuesta, para dar una retroalimentación al usuario. Este texto cambiará en la línea 18, pero como no sabemos en qué momento se resolverá la función, dejamos un “cargando” y lo cambiamos cuando la misma termina.
Dentro de la función simplemente decodificamos la respuesta como JSON, y la colocamos dentro del div contenedor.
El servidor con PHP
Ahora veamos el servidor de PHP.
Vamos a recibir los datos en $_POST usando la clave que usamos al enviarlos en el objeto. Con estos datos ya podemos trabajar; en este caso simplemente los pondré dentro de un archivo de texto usando file_put_contents pero bien podrían ser guardados en una base de datos.
Al terminar imprimo un mensaje codificado como JSON, que se pondrá en el div de retroalimentación en el formulario.
<?php
// Aquí podemos procesar los datos. Vienen dentro de $_POST
$nombre = $_POST["nombre"];
$correo = $_POST["correo"];
$edad = $_POST["edad"];
file_put_contents("datos.txt", "Nombre: $nombre, Correo: $correo, Edad: $edad\n", FILE_APPEND);
echo json_encode("Formulario enviado");
Poniendo todo junto
Así que al final queda así: