Aprender AJAX – Procesar un Formulario con XMLHttpRequest

0

En este articulo les mostrare una forma de procesar un formulario usando Ajax, Javascript y el componente XMLHttpRequest, comencemos.

En el articulo anterior les explicaba que AJAX es una forma de hacer peticiones sin recargar el navegador.

Les recuerdo que en el articulo anterior estan las bases para seguir este ejemplo, si no entienden algo, vallan al articulo anterior :).

Para enviar o procesar un formulario mediante AJAX o XMLHttpRequest usaremos un componente FormData.

A continuacion les dejo el codig completo:

Les explico algunas partes importantes del codigo:


var form = document.getElementById("myform");

Lo que hacemos es obtener el objeto del formulario en la variable form, por ello al formulario le colocamos un id.

La variable form la usaremos para 2 cosas:

  1. Para definir el evento “onsubmit”
  2. Para usar el objeto form compo parametro de FormData para enviarlo a travez de la funcion send del objeto XMLHttpRequest.

var formdata = new FormData(form);

En la linea anterior creamos un objeto tipo FormData a partir del objeto del formulario.

Y ahora solo basta crear el objeto XMLHttpRequest con los parametros correctos, metodo, archivo para procesar el formulario y si sera sincrono o asincrono.


var xhr = new XMLHttpRequest();
xhr.open("POST","process.php",false);
xhr.send(formdata);

Listo, con esto ya enviamos el formulario usando AJAX y nos ahorramos recargar la pagina y asi mejorar la experiencia del usuario.

Agregue un par de lineas mas, un console.log para ver lo que responde el servidor y form.reset() para borrar los datos del formulario despues de enviar los datos.

Resultado

A continuacion el resultado de la ejecucion del codigo.

Descargar

Conclusion y Mas

Esto es todo por ahora.

Les invito a que me sigan apoyando con sus Likes, comentarios y suscripciones a mi canal de youtube https://youtube.com/evilnapsis/

Tambien se pueden suscribir al blog en la seccion de “Suscribete a mi Blog”, recuerda debes insertar tu email y luego te llegara un mensaje a tu correo para que confirmes tu suscripcion.

LEAVE A REPLY

Please enter your comment!
Please enter your name here