Aprender AJAX – Procesar un Formulario con XMLHttpRequest

 in Web Development  tagged ajax / formdata / xmlhttprequest by

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:


<!DOCTYPE html>
<html>
<head>
<title>Formulario Ajax</title>
</head>
<body>
<h1>Formulario Ajax</h1>
<form id="myform">
<label for="name">Nombre</label>
<input type="text" name="name" id="name" placeholder="Nombre" required><br>
<label for="lastname">Apellidos</label>
<input type="text" name="lastname" id="lastname" placeholder="Apellidos" required><br>
<label for="phone">Telefono</label>
<input type="text" name="phone" id="phone" placeholder="Telefono" required><br>
<label for="address">Domicilio</label>
<input type="text" name="address" id="address" placeholder="Domicilio" required><br>
<input type="submit" value="Enviar">
</form>
<script>
var form = document.getElementById("myform");
form.onsubmit = function(e){
e.preventDefault();
var formdata = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST","process.php",false);
xhr.send(formdata);
console.log(xhr.responseText);
form.reset();
}
</script>
<p>Powered by <a href="https://evilnapsis.com/" target="_blank">Evilnapsis</a></p>
</body>
</html>

view raw

ajax-2-form.php

hosted with ❤ by GitHub

Les explico algunas partes importantes del codigo:

[code language=”javascript”]

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

[/code]

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.
[code language=”javascript”]

var formdata = new FormData(form);

[/code]

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.

[code language=”javascript”]

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

[/code]

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

[sociallocker]

Link de descarga: https://drive.google.com/open?id=0B4VwLG0Dpi3tSktQb2E1TXRyaEE

[/sociallocker]

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 comment