Este documento explica cómo crear una página web que obtiene datos JSON de un archivo externo y los muestra en una lista desplegable usando jQuery. Primero se crea una página básica con un selector y se incluye jQuery. Luego se genera un archivo JSON con datos de usuarios y se usa getJSON() de jQuery para leerlo y agregar las opciones al selector. También se explica cómo generar el JSON con PHP.
0 calificaciones0% encontró este documento útil (0 votos)
29 vistas16 páginas
Este documento explica cómo crear una página web que obtiene datos JSON de un archivo externo y los muestra en una lista desplegable usando jQuery. Primero se crea una página básica con un selector y se incluye jQuery. Luego se genera un archivo JSON con datos de usuarios y se usa getJSON() de jQuery para leerlo y agregar las opciones al selector. También se explica cómo generar el JSON con PHP.
Este documento explica cómo crear una página web que obtiene datos JSON de un archivo externo y los muestra en una lista desplegable usando jQuery. Primero se crea una página básica con un selector y se incluye jQuery. Luego se genera un archivo JSON con datos de usuarios y se usa getJSON() de jQuery para leerlo y agregar las opciones al selector. También se explica cómo generar el JSON con PHP.
Este documento explica cómo crear una página web que obtiene datos JSON de un archivo externo y los muestra en una lista desplegable usando jQuery. Primero se crea una página básica con un selector y se incluye jQuery. Luego se genera un archivo JSON con datos de usuarios y se usa getJSON() de jQuery para leerlo y agregar las opciones al selector. También se explica cómo generar el JSON con PHP.
[color=#000000] [/color] 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:
<script type="text/javascript" >
$.getJSON("ajax.json",function(data){ for(usuario in data.users){ $("#usuarios" .append("<option>"+data.users[usuario].nombre+"</option>" ; } } </scri p
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:
{"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.
