Hola mundo con JSON y Jquery
Wednesday, December 23rd, 2009Saludos.
Hace chingos no pasaba por aqui, disculpas.
Desde el dia de ayer, me estuve rompiendo la cabeza para cargar y leer los datos de un XML, utilizaba la funcion de jquery $.ajax y hasta el dia de hoy di con el error, se trataba de el dataType, pues yo le asignaba el valor “xml”, y vagando por diferentes blogs, di con la solucion. Cuando cargas, lees o como sea, un archivo XML , si lo haces desde tu servidor local, lo que obtienes es texto plano, aun asi el archivo sea XML, porque pasa?…no lo se…pero lo solucione al cambiar el dataType a “text” .
Junto a mi epica busqueda de la razon por la cual no podia leer los datos del XML, pense en JSON, ya habia oido sobre el, mas nunca lo habia usado, asi que me puse a investigar y poco a poco me fui enamorando de la sintaxis y forma de estructurar los datos. Asi pues, acabo de hacer mi primer “Hola Mundo” en JSON; y no fue nada dificil.
Empecemos con el tutorial.
- Primero, necesitamos saber como se estructuran los datos en JSON.
Los datos en JSON tienen la siguiente forma:
{
"campo" : "valor",
"campo" : "valor"
}
Y tambien puede haber combinaciones como esta:
{
"campo" : "valor",
"campo" : [{
"campo" : "valor",
"campo" : "valor"
}]
}
2. Ahora que ya sabemos como se estructuran los datos en JSON, debemos crear el codigo en php que nos devuelva una cadena con los datos formateados en JSON. Para esto he creado el archivo llamado getJson.php, y contiene el siguiente codigo:
<?php
$json="{'items':[{'mensaje':'hola'},{'mensaje':'mundo'}]}";
echo $json;
?>
3. Ahora crearemos el siguiente archivo, el cual llamaremos json.html, que contiene el siguiente codigo:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" ></script>
<script>
$(document).ready(function(){
$.getJSON("getJson.php", function(data){
$.each(data.mensaje, function(i,item){
alert(item.cosa);
});
});
});
</script>
</head>
<body>
hola mundo de JSON
</body>
</html>
Cuando entremos y veamos el resultado, obtendremos dos alert’s, mostrano el hola mundo; decidi partir la oracion en dos partes, para mostar la forma de acceder a los datos.
Como pueden ver Jquery tiene una funcion especial para obtener datos del tipo JSON remotamente, $getJSON, recibe como parametros la url del script que nos arrojara los datos, y opcionalmente datos que deseemos enviarle al servidor, y un callback, para ejecutar algo de codigo cuando recibamos los datos.
Practicamente lo que hacemos es decirle a jquery que busque el dato “items” y por cada elemento encontrado dentro de el acceda al campo “mensaje” y lo muestre en un alert. ña variable “i” es el contador de numero de elementos que se van encontrando.
Espero que este mini tutorial sea de ayuda para aquellos que deseen empezar a trabajar con JSON
