JQueryUI

Acceder a datos JSON con jQuery – jQuery Tips

Una de las maneras para rellenar un formulario dinámicamente en base a una petición AJAX es por medio de JSON.

Supongamos el siguiente escenario. Tenemos un formulario que se tiene que autorellenar en base a una petición AJAX, por ejemplo, le pasamos el código de una persona y nos tiene que mostrar los datos.


// Fichero datos.php

$datos = array(

1 => array('nombre' => 'Yo', 'apellidos' => 'mismo'),

2 => array('nombre' => 'Tu', 'apellidos' => 'aquel'),

);

$codigo = filter_input(INPUT_POST, 'codigo', FILTER_SANITIZE_NUMBER_INT);

foreach ($datos as &$dato) {
 $dato = utf8_encode($dato);
 }
 echo json_encode($datos[$codigo]);


<!-- Fichero formulario.html -->

<form id='formulario'>
 <input type='text' id='codigo'>
 <button type='button' id='buscar'>Buscar Registro</button>
 <input type='text' id='nombre'>
 <input type='text' id='apellidos'>
</form>
<script>
$('#buscar').click(function(){
 $.post('datos.php', {codigo:$('#codigo').val()}, function(data){
 data = JSON.parse(data);
 $('#nombre').val(data.nombre);
 $('#apellidos').val(data.apellidos);
 });
 return false;
});
</script>

En este ejemplo los datos están almacenados dentro de un array, lo normal es que fueran resultado de una consulta SQL.

En el formulario pongo, por ejemplo, el 1 para obtener los datos, estos se mandan vía post al fichero de datos, antes de devolverlos los codifico con utf8_encode para que no de ningún error, luego les damos formato con json_encode, y una vez que lo recibimos los tenemos que tratar con JSON.parse para poder acceder a ellos como si fueran un objeto.

Anuncios

5 pensamientos en “Acceder a datos JSON con jQuery – jQuery Tips”

    1. lo que pasa es que yo estoy implementando tu codigo para poder realizar una busqueda en la base de datos por el rut del clienete y que me muestre los datos de ese rut en los campos de textos… probe tu codigo porque es eso lo que quiero para mi sistema e implemente tu codigo tal cual lo tienes para probar si funcionaba y no me funciono… no me muestra los valores en los campos de texto… porfavor mandeme los archivos por correo

      1. He revisado el código y funciona correctamente, te pongo a continuación el código completo. Ya me dirás si te funciona
        formulario.html

        <!DOCTYPE html>
        <html lang='es'>
        <head>
            <meta charset="utf-8">
            <title>Prueba formulario JSON</title>
            <body>
                <form id='formulario'>
                    <label for='codigo'>Codigo a Buscar</label>
                    <input type='text' id='codigo' placeholder='Ponga 1 o 2'>
                    <button type='submit' id='buscar'>Buscar Registro</button><br/>
                    <input type='text' id='nombre'>
                    <input type='text' id='apellidos'>
                </form>
        <!-- Hace falta la libreria de jQuery -->
                <script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
                <script>
        // He cambiado el click por submit, pero en este ejemplo no tiene relevancia
                    $('#formulario').submit(function(){
                        $.post(
                            'datos.php',
                            {codigo:$('#codigo').val()},
                            function(data){
                                data = JSON.parse(data);
                                $('#nombre').val(data.nombre);
                                $('#apellidos').val(data.apellidos);
                            });
                            return false;
                        });
                </script>
        </body>
        </html>
        

        datos.php

        <?php
        // Array de datos
        $datos = array(
            1 => array('nombre' => 'Yo', 'apellidos' => 'mismo'),
            2 => array('nombre' => 'Tu', 'apellidos' => 'aquel'),
        );
        // Almacenamos el codigo recibido
        $codigo = filter_input(INPUT_POST, 'codigo', FILTER_SANITIZE_NUMBER_INT);
        // No es necesario pero lo hago para codificar los datos
        foreach ($datos as &$dato) {
            $dato = utf8_encode($dato);
        }
        echo json_encode($datos[$codigo]);
        
  1. Saludos, en caso de tener algo como esto :

    Codigo a Buscar

    Buscar Registro

    Codigo a Buscar

    Buscar Registro

    Codigo a Buscar

    Buscar Registro

    Al hacerlo con la primera fila de la tabla lo hace bien pero cuando paso a las otras filas de inputs name=’codigo[]’ carga solamente en la primera fila el nombre y apellido, me gustaria que aplicara la función en las otras filas correspondientes al codigo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s