JQueryUI
JavaScript,PHP,Programación

Acceder a datos JSON con jQuery – jQuery Tips

5 comentarios

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.

5 comentarios 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

      Responder

      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]);

  3. 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

Deja un comentario