Web y desarrollo

Method Post, Ficheros y AJAX. Soluciones sencillas para que no te vuelvas loco

Posted on: diciembre 2, 2008

El envío de formularios mediante métodos AJAX puede ser un tanto engorroso, más aún teniendo en cuenta que deberemos usar funciones diferentes en función de si el método del formulario es GET o POST. Esto nos puede plantear algunos problemas, ya que dependiendo del tipo de campo del formulario debemos acceder a una propiedad u otra del objeto. Podemos utilizar esta función, a la que pasamos como parámetro la id del formulario que queramos enviar, para concatenar las variables en una cadena del tipo var1=value1&var2=value2&…varN=valueN.

function variablesdelformulario(form) {

var salida = ”; //cadena de variables
var i = 0; //contador
var primeravez = true; //Switch para saber si se comienza la cadena

formobj = document.getElementById(form); //Objeto formulario a tratar

//Recorremos todos los elementos del formulario
for (i = 0; i < formobj.elements.length; i++){

//Si es la primera vez cambiamos el switch
if (primeravez) primeravez = false;
//Si no es la primera vez añadimos
else salida += ‘&’;
//Si es un checkbox marcado…
if (formobj.elements[i].type == “checkbox”){

if (formobj.elements[i].checked) 
salida += formobj.elements[i].name+”=”+formobj.elements[i].checked;

}
//Si es un radio button y está marcado…
else if (formobj.elements[i].type == “radio”){

if (formobj.elements[i].checked)
salida += formobj.elements[i].name+”=”+formobj.elements[i].value;

}
//Si es cualquier otro elemento
else{
salida += formobj.elements[i].name+”=”+formobj.elements[i].value;
}

}
//Devolvemos la cadena
return salida;
}

El gran problema viene cuando uno de los campos del formulario es del tipo file. En Desarrollo Web nos dicen:

[…] Sería algo como Archivo Subido con AJAX. Esto, hoy por hoy, no se puede hacer. Es así y no hay vuelta que darle. 
Entonces usted dirá … 
– heeee, si yo en gmail puedo subir archivos y lo hago con AJAX !!!. 
Yo le respondo … 
– No sea bobo, yo también creía lo mismo. 

Hay sobradas muestras que el objeto XMLHttpRequest no puede enviar archivos al servidor. […]

Efectivamente, el objeto XMLHttpRequest no puede enviar ficheros, pero se pueden enviar simulando una conexión asíncrona con un iframe, tal y como nos enseñan en el artículo Ajax File Upload.

Actualización 3/12/2008

Otro problema que se nos puede presentar al pasar variables de esta forma es que el caracter ‘&’ esté dentro de uno de los valores -algo que casi siempre ocurrirá si uno de los campos contiene código HTML-, porque la variable que lo contenga se cortará exactamente donde aparezca ‘&’. Por ejemplo si var1 = ‘Acci&oacute;n’, la cadena de variables será “var1=Acci&oacute;n”, lo que el servidor interpretará como dos variables: var1 = ‘Acci’ y oacute;n sin valor asignado, y además con un ‘;’ por medio, lo que hará que el programa no funcione de ni coña.

Pero podemos solucionarlo de una manera muy sencilla haciendo la siguiente modificación en la función para reemplazar el símbolo ‘&’ por una cadena de texto que nosotros podamos identificar para luego recuperarla. Afortunadamente tenemos funciones en JavaScript y PHP que hacen eso. En JavaScript codificaremos el valor de la variable con encodeURIComponent():

salida += formobj.elements[i].name + “=” + encodeURIComponent(formobj.elements[i].value);

Al recibir los parámetros en el servidor, con PHP, podemos reestablecerlos con urldecode():

foreach ($_POST as $key => $value)
$_POST[$key] = urldecode(‘MyHTMLamp;simbol’, ‘&’, $value);

De esta forma, ya con las variables separadas, volvemos a sus valores originales. Esto puede ser muy útil para enviar datos de textareas que utilizan un editor WYSIWYG o que contienen código HTML a secas, o aún más sencillo, si tenemos un campo ‘empresa’ y su valor puede ser “McDollar & sons”.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Posts Más Vistos

del.icio.us

Top Clicks

  • Ninguna

Calendario

diciembre 2008
L M X J V S D
« Nov   Ene »
1234567
891011121314
15161718192021
22232425262728
293031  
A %d blogueros les gusta esto: