APIs de JavaScript - AJAX

En esta página se muestran ejemplos del uso FormData para recibir y enviar datos de formularios

Peticiones simples

Ejemplo de envío de datos sin formulario

<script>

function enviaFormulario(url, target) {
    let datos = new FormData;
    const event = new Date(Date.now());
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

    datos.append("user", "usuario");
    datos.append("pass", "12345");
    datos.append("date", event.toLocaleDateString("es-Es",options));

    req.onreadystatechange = function (evento) {

        if (req.readyState === this.DONE) {//Estado 4
            if (req.status === 200) {
                let tipo = req.getResponseHeader("Content-Type");

                console.log("Contenido tipo MIME:" + tipo);
                console.log("Contenido tipo:" + req.responseType);
                resultado.innerHTML = req.responseText;
            } else {
                console.log("[" + req.readyState + "] Error recibiendo datos\n");
            }
        }
    };
    req.open('POST', url);
    req.send(datos);
}

El recurso http://labtelema.ujaen.es/api/form.php hace un eco de los parámetros enviados.

En este primer ejemplo no hay ningún formulario pero se envían datos don el mismo formato con FormData

Ejemplo de envío de datos automáticamente de un formulario

<script>

function enviaFormularioCompleto(url, formulario) {

    let datos = new FormData(formulario);
    const event = new Date(Date.now());
    const options = {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};


    datos.append("date", event.toLocaleDateString("es-Es", options));

    req.onreadystatechange = function (evento) {

        if (req.readyState === this.DONE) {//Estado 4
            if (req.status === 200) {
                let tipo = req.getResponseHeader("Content-Type");
                console.log("Contenido tipo MIME:" + tipo);
                console.log("Contenido tipo:" + req.responseType);
                resultado2.innerHTML = req.responseText;
            } else {
                console.log("[" + req.readyState + "] Error recibiendo datos\n");
            }
        }
    };
    req.open('POST', url);
    req.send(datos);
}

El recurso http://labtelema.ujaen.es/apiform.php hace un eco de los parámetros enviados.

En este ejemplo se envía un formulario completo a través de FormData

Ejemplo de envío de un fichero

<script>

function enviaFichero(url, formulario) {

    let notvalid = document.querySelectorAll(":invalid");
    console.log(notvalid);
    let datos = new FormData(formulario);
    const event = new Date(Date.now());
    const options = {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'};


    datos.append("date", event.toLocaleDateString("es-Es", options));

    req.onreadystatechange = function (evento) {
        if (req.readyState === this.DONE) {//Estado 4
            if (req.status === 200) {
                let tipo = req.getResponseHeader("Content-Type");
                console.log("Contenido tipo MIME:" + tipo);
                console.log("Contenido tipo:" + req.responseType);
                resultado3.innerHTML = req.responseText;
            } else {
                console.log("[" + req.readyState + "] Error recibiendo datos\n");
            }
        }
    };
    req.open('POST', url);
    req.send(datos);
}

El recurso http://labtelema.ujaen.es/form.php hace un eco de los parámetros enviados.

En este primer ejemplo no hay ningún formulario pero se envían datos don el mismo formato con FormData

Abre el explorador de conexión del navegador (F12) y revisa la petición POST enviada para ver el fichero.

Inicio