Recientemente he encontrado escenarios donde es necesario el uso de un formulario, pero «físicamente» no disponemos de uno en la página a tratar. La forma en que los desarrolladores han sabido enfrentarse a esta situación ha sido la siguiente:
var form = $("<form method='POST' action='" + myAction + "'>"); form.append("<input type='hidden' name='FirstName' value ='" + firstName + "' />"); form.append("<input type='hidden' name='LastName' value ='" + lastName + "' />"); form.append("<input type='hidden' name='Birth' value ='" + birth + "' />"); form.append("<input type='hidden' name='Phone' value ='" + phone + "' />"); form.appendTo("body").submit();
Básicamente, lo que se pretende es crear un formulario al vuelo (con sus campos de tipo hidden para que no se vean), añadirlo al body de nuestra vista e invocar el evento submit.
En este post veremos cómo de sencillo es realizar esta tarea utilizando FormData de XMLHttpRequest Level 2.
XMLHttpRequest Level 2 y FormData
Gracias a las mejoras introducidas en XMLHttpRequest, podemos realizar la operación anterior utilizando una nueva interfaz llamada FormData. Instanciando un objeto de este tipo, seremos capaces de construir un conjunto de claves y valores, representando de esta forma los campos de un formulario y su contenido. La forma de rellenar este objeto es bastante sencilla:
var formData = new FormData(); formData.append("FirstName", firstName); formData.append("LastName", lastName); formData.append("Birth", birth); formData.append("Phone", phone); var request = new XMLHttpRequest(); request.open("POST", myAction); request.send(formData);
Como podemos comprobar en el código anterior, he utilizado los mismos datos que en el formulario del primer ejemplo y hemos ido añadiendo uno a uno con su correspondiente clave. Si no hacemos uso de ninguna librería, podemos utilizar XMLHttpRequest directamente, indicando el http verb, la URL a la que va dirigida esta petición e incluyendo como parámetro del método send el objeto instanciado de FormData.
En el caso de que usemos JQuery, es necesario configurar un par de opciones en la petición:
$.ajax({ url: myAction, type: "POST", data: formData, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType });
Este objeto está soportado por los navegadores más comunes, como se puede ver en la tabla de Can I Use XMLHttpRequest?, por lo que no hay motivo para no utilizarlo si no necesitamos soporte para versiones más antiguas 🙂
Espero que sea de utilidad.
¡Saludos!