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.

See the gist on github.

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í:

See the gist on github.

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.

See the gist on github.

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.

Nota: si quieres probarlo haz click aquí.

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í:

See the gist on github.

Cargamos el estilo de Bootstrap, y dejamos los ids intactos. Ahora se ve así:

De igual forma si quieres probarlo haz click aquí.

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.