Formularios en Ajax

14-4-2020

Imaginemos que tenemos un formulario y queremos enviarlo usando ajax...

Aquí tenemos nuestro formulario en HTML.

    <form>
        <input type="text" name="usuario" placeholder="Ingrese usuario">
        <input type="text" name="clave" placeholder="Ingrese clave">
        <input type="text" name="email" placeholder="Ingrese email">
        <button>Enviar</button>
    </form>

Vamos a capturar la información usando Ajax:

function representarContenidoFormData(data) {
    //metemos en las variables las keys y values que nos vendrán del parámetro, que será un objeto
    let claves = data.keys()
    let valores = data.values()
    //usamos .netx() para obtener el valor de los campos. Next() es un método que devuelve un objeto con dos parámetros: done que es true si el campo tiene contenido, y value, que contiene el valor del campo
    do {
        let clave = claves.next()
        let valor = valores.next()
        //si el parámetro done de valor o de clave es true
        if(valor.done || clave.done) break;
        //se imprimirá, por ejemplo "usuario" y luego el texto que indicamos en el campo
        console.log(clave.value, valor.value)
    }
    // seguir mientras siga habiendo resultados
    while(true)
}

//el form en sí mismo lo metemos en la variable form
let form = document.querySelector('form')
//le agregamos un escuchador al submit del form
form.addEventListener('submit', e => {
    //evitamos el comportamiento defult del form, como ya vimos
    e.preventDefault()
    //metemos toda la data del form en la variable data
    let data = new FormData(form)
    //si hacemos un console.log de data, veremos que devuelve todo el contenido del form como un objeto
    //console.log(data)
    representarContenidoFormData(data)
})

Para enviar formData a través del método POST de Ajax:

let xhr = new XMLHttpRequest
xhr.open('post','url')
xhr.send(data)