Recibir varios datos por Ajax con Javascript

Introducción

Cuando se trata de recibir varios datos tras hacer una petición Ajax, surge un problema, solo se puede recibir una cadena de texto, y ya está, esto se debe a la naturaleza de Ajax, pero a eso dedicaré otro post más adelante.

Con el método GET, existe una función (jQuery.getJSON), pero este método no es el más elegante a mi entender en muchos proyectos. (El artículo POST vs. GET está en proceso de fabricación…).

Así que necesitamos alguna manera de pasar X datos desde un script a una función javascript que nos ha hecho la petición Ajax.

JSON

Bueno amigos, JSON es nuestro aliado en este caso. JSON es simplemente una manera de juntar datos en forma de string, con un estándar, claro.

¿Y cuál es el punto fuerte de esto? Pues que al ser estándar en muchos lenguajes existen funciones que nos facilitan la vida (PHP, Javascript, Python, Perl…).

Veremos un ejemplo con PHP, aunque en realidad no importa el lenguaje, la idea se puede extrapolar con scripts de otros lenguajes siempre y cuando implementen funciones de JSON.

Caso práctico

En un script de PHP (prueba.php) tenemos el siguiente código:

1
2
3
4
5
6
7

<?php
 $array_datos = array( "direccion" => "Calle Inventada",
                       "ciudad" => "Hong Kong"
                     );
 $array_datos_json = json_encode($array_datos); //Lo codificamos en JSON
 echo $array_datos_json;
?>

Bien, tenemos la siguiente petición por Ajax, con el método POST al script anterior.

1
2
3
4
5

$.post("prueba.php", { "func": "conseguirDireccionCiudad" },
  function(data){
    alert(data.direccion); // Dato 1
    alert(data.ciudad); // Dato 2
  }, "json");

Como se puede ver se decodifica directamente con la función $.post(), que permite especificar el tipo de dato que vamos a obtener en el 4º parámetro.

Documentación

Jquery + Ajax | Jquery.com
JSON | Documentación oficial
JSON | Documentación útil