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.
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
.
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.
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.
Así que al final queda así:
Puedes probar el ejemplo aquí.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.