Bienvenidos a mi pequeño tutorial para usar json y jquery en sus aplicaciones web. Si quieren averiguar un poco acerca de json y jquery pueden visitar los siguientes enlaces (en inglés): Jquery: http://www.w3schools.com/jquery/default.asp JSON: http://www.w3schools.com/json/default.asp Asumiré que todos tienen sus servidores locales listos y sus editores de texto también. 1. Crear la página: Para comenzar crearemos un archivo llamado index.php (si no lo tienen ya) y otro llamado ajax.json en index.php escribiremos:

Tutorial @shine1098

Con esto tenemos una pagina básica, y llamamos al jquery, en este caso estoy usando el que google está hospedando pero si lo desean pueden descargar jquery desde aqui: http://code.jquery.com/jquery-1.7.1.min.js Pero no hay diferencia alguna, el codigo es el mismo y es el mismo jquery. 2.Llenar el archivo JSON Supongamos que queremos obtener una lista de personas, entonces tenemos que hacer la lista en un archivo JSON y luego obtenerla con jquery, escribiremos en el archivo ajax.json : { "users":[ {"nombre":"maria"}, {"nombre":"Carlos"}, {"nombre":"Peter"}, {"nombre":"eduardo"} ] } Lo que creamos aqui elemento llamado users el cual es un array que contiene elementos que contienen los nombres de cada persona. 3.Llamar al archivo JSON usando Jquery En nuestro archivo index.php dentro de las etiquetas body colocamos el siguiente codigo: Lo que hace es, usar la función getJSON() de jquery para que lea el archivo ajax.json y el segundo parámetro es una función que se ejecutara cuando haya terminado de leer el archivo, el parámetro data es el contenido de nuestro archivo ajax.json ya convertido en un objeto. La parte del for(usuario in data.users) recorre cada elemento que hay en el array users de data y luego lo añade al select que habiamos creado anteriormente, usando la funcion append() de Jquery. 4.Probando todo Si hicieron todo bien deberán tener algo como esto al entrar a http://locahost o a donde sea que vayan a probar la aplicación: También pueden usar php para generar json por ejemplo, crean un archivo llamado ajax.php y le ponen el siguiente código: array( array('nombre' => 'maria'), array('nombre' => 'pablo') )); echo json_encode($usuarios); ?> Eso devolverá como resultado: {"users":[{"nombre":"maria"},{"nombre":"pablo"}]} Es importante que no usen las dobles comillas(" porque el codigo json generado estará mal, tienen que usar las comillas sencillas ( ' ) Entonces en lugar de usar ajax.json en el codigo de index.php usarian ajax.php. Documentación de las funciones usadas en este tutorial: Jquery: getJSON() http://api.jquery.com/jQuery.getJSON/ append() http://api.jquery.com/append/ PHP: json_encode() http://www.php.net/manual/es/function.json-encode.php Eso es todo espero que les haya gustado y les sea útil!