Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Tutorial Aprender AJAX – Procesar un Formulario con XMLHttpRequest
#1
Bombilla 
En este articulo les mostrare una forma de procesar un formulario usando Ajax, Javascript y el componente XMLHttpRequest, comencemos.

En el articulo anterior les explicada que AJAX es una forma de haver 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 Sonrisa.

Para enviar o procesar un formulario mediante AJAX o XMLHttpRequest usaremos un componente FormData.
A continuacion les dejo el codig completo:


Código:
<!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://amnersaucedososa.pe.hu" target="_blank">Amner</a></p>
</body>
</html>

Les explico algunas partes importantes del codigo:

Código:
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.


Código:
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.

[Imagen: Screenshot-at-2017-01-30-21-43-47-640x361.png]

Conclusion y Mas

Esto es todo por ahora. ¡Me gusta!
#2
Amigo y si quisiera agregarle CSS para darle un poco de color y estilos como podría añadirlo?
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Material para aprender programación C++ Posits 8 121 06-05-2018, 05:36 PM
Último mensaje: brettavz
Sonrisa Login->html+js+ajax+php wpadilla 2 240 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
  [Tutorial] Aprender AJAX – Hola Mundo! amner 1 285 13-03-2017, 02:46 PM
Último mensaje: manuelxd1010
  [Tutorial] Aprender Git desde cero habacuc78 0 275 03-11-2016, 02:10 AM
Último mensaje: habacuc78
  [Tutorial] Aprender AS3: Variables Jvh_22 1 290 11-10-2016, 04:08 PM
Último mensaje: efbsfcd
  Como enviar un formulario por correo con php Rolando Sanchez 1 1,325 04-02-2016, 09:16 PM
Último mensaje: jfuentes7
  [pedido] tutoriales para aprender css sondeo 10 943 04-01-2016, 01:22 PM
Último mensaje: Taquion
  Todos deberían aprender a programar habacuc78 19 882 23-12-2015, 08:50 AM
Último mensaje: AbaddonOrmuz
  Mejores páginas para aprender programación manubenidorm 3 447 31-10-2015, 05:13 AM
Último mensaje: habacuc78
  Formulario de inicio de session con html5 luis.ml 0 1,349 16-08-2015, 12:52 AM
Último mensaje: luis.ml



Usuarios navegando en este tema: 1 invitado(s)