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.

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.

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.

Poniendo todo junto

Así que al final queda así:

Puedes probar el ejemplo aquí.