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
  Recursos gratis para aprender Kotlin Posits 22 326 20-05-2019, 06:13 AM
Último mensaje: Lob3zNo
  [Duda] ¿Alguna pagina donde pueda aprender MYSQL+PHP? GabrielYzarra 0 31 14-05-2019, 04:19 PM
Último mensaje: GabrielYzarra
Sonrisa Código completo con formulario para crear códigos QR WMasterT 4 129 18-12-2018, 05:22 PM
Último mensaje: DamianUzcanga
Exclamación [Duda] Se ha dañado mi formulario web jlrcoff 6 189 09-12-2018, 05:26 PM
Último mensaje: Jean Pierre
  Bootstrap Formulario Basico cmascreativo.ml 5 238 08-10-2018, 06:53 AM
Último mensaje: Boreas
  APORTE, quieres aprender HTML5? GonzaloMacedo 7 450 06-09-2018, 04:33 AM
Último mensaje: jcifuentes
  Material para aprender programación C++ Posits 8 421 06-05-2018, 05:36 PM
Último mensaje: brettavz
Sonrisa Login->html+js+ajax+php wpadilla 2 467 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
  [Tutorial] Aprender AJAX – Hola Mundo! amner 1 535 13-03-2017, 02:46 PM
Último mensaje: manuelxd1010
  [Tutorial] Aprender Git desde cero habacuc78 0 408 03-11-2016, 02:10 AM
Último mensaje: habacuc78



Usuarios navegando en este tema: 1 invitado(s)