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!