Serializar array con JavaScript
Publicado en Programación el 12 de July de 2009 por Manel Pérez MataTags: AJAX, JavaScript, PHP
Ayer os comentaba como pasar arrays por POST con PHP mediante los métodos serialize y unserialize y dejaba un poco al aire como hacerlo desde JavaScript.
Una manera bastante usual de hacerlo en JavaScript es concatenar los valores del array en un string separados por un token que luego nos permitirá volver a generar el array con la función split de PHP, sin embargo, nos puede ser interesante utilizar la serialización por defecto de PHP, de este modo al recoger el valor, únicamente tendremos que llamar a unserialize y volveremos a tener el array intacto.
Aquí os dejo una función que me he currado que serializa un array para poder enviar en un formulario o vía AJAX a nuestro servidor:
function serialize(arr)
{
var res = 'a:'+arr.length+':{';
for(i=0; i<arr.length; i++)
{
res += 'i:'+i+';s:'+arr[i].length+':"'+arr[i]+'";';
}
res += '}';
return res;
}
El ejemplo de ayer modificado para usar serialize desde el lado de cliente sería:
<?php
if(isset($_POST['frutas']) && $_POST['frutas']!="" )
{
// si existe lo deserializamos para poder tratarlo
$frutas = unserialize(stripslashes($_POST['frutas']));
var_dump($frutas);
}
?>
<html>
<head>
<script language="javascript" type="text/javascript">
function serialize(arr)
{
var res = 'a:'+arr.length+':{';
for(i=0; i<arr.length; i++)
{
res += 'i:'+i+';s:'+arr[i].length+':"'+arr[i]+'";';
}
res += '}';
this.document.forms[0].frutas.value = res;
}
</script>
</head>
<form method="POST" onSubmit="serialize(new Array('Cereza', 'Pera', 'Fresa', 'Manzana'))">
<input type="hidden" name="frutas" value="" />
<input type="submit" value="Pasar" />
</form>
</html>
Realmente, no hay mucha diferencia entre usar un método u otro, sin embargo, me parece más elegante serializarlo de este modo antes de enviar.
(3 votes, average: 3.67 out of 5)
Loading ...
July 23rd, 2009 11:13
[...] publicaré en un nuevo post una función serialize para JavaScript, de este modo, podemos enviar desde el lado cliente un array serializado con el submit de un [...]