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
  Bootstrap Formulario Basico cmascreativo.ml 5 85 08-10-2018, 06:53 AM
Último mensaje: Boreas
  APORTE, quieres aprender HTML5? GonzaloMacedo 7 280 06-09-2018, 04:33 AM
Último mensaje: jcifuentes
  Material para aprender programación C++ Posits 8 256 06-05-2018, 05:36 PM
Último mensaje: brettavz
Sonrisa Login->html+js+ajax+php wpadilla 2 345 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
  [Tutorial] Aprender AJAX – Hola Mundo! amner 1 380 13-03-2017, 02:46 PM
Último mensaje: manuelxd1010
  [Tutorial] Aprender Git desde cero habacuc78 0 335 03-11-2016, 02:10 AM
Último mensaje: habacuc78
  [Tutorial] Aprender AS3: Variables Jvh_22 1 365 11-10-2016, 04:08 PM
Último mensaje: efbsfcd
  Como enviar un formulario por correo con php Rolando Sanchez 1 1,492 04-02-2016, 09:16 PM
Último mensaje: jfuentes7
  [pedido] tutoriales para aprender css sondeo 10 1,100 04-01-2016, 01:22 PM
Último mensaje: Taquion
  Todos deberían aprender a programar habacuc78 19 1,111 23-12-2015, 08:50 AM
Último mensaje: AbaddonOrmuz



Usuarios navegando en este tema: 1 invitado(s)