Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 1ejemplo JSon Con Jquery

    Cargado por

    jesus alamilla
    20 vistas16 páginas

    Título original

    1Ejemplo JSon con Jquery

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    20 vistas16 páginas

    1ejemplo JSon Con Jquery

    Cargado por

    jesus alamilla

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 16

    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:

    <!DOCTYPE html>
    <html>
        <head>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>        

        </head>
        <body>

        <h1>Tutorial @shine1098</h1>
            <select id="usuarios"></select>
        </body>
    </html>

    [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:

    <?php
    $usuarios = array('users' => 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!

    También podría gustarte