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.

Enviar formulario con jQuery y AJAX a PHP

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.

Relacionado:  PHP - Saber si cadena está vacía

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

Enviar formulario con jQuery y AJAX a PHP

Puedes probar el ejemplo aquí.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 574 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: