[TUTORIAL] Obtener varios valores con AJAX (Jquery + ZendFramework)

GatorV · #1 (**permalink**) 05/08/2009, 16:01

He visto preguntado muchas veces en el foro como obtener un juego de registros por AJAX, como por ejemplo los datos de un usuario y ponerlos en una pagina web sin refrescar la pagina.

En este tutorial vamos a ver un ejemplo básico de como hacerlo usando JQuery en el cliente, y en el server PHP con ZendFramework.

Para empezar creamos nuestra base de datos:

Código SQL:

Ver originalCREATE TABLE IF NOT EXISTS `usuario` (
  `usuario_id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  `nombre` VARCHAR(30) NOT NULL,
  `telefono` VARCHAR(10) NOT NULL,
  `color_favorito` VARCHAR(20) NOT NULL,
  `pizza` tinyint(4) NOT NULL,
  PRIMARY KEY  (`usuario_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;
 
INSERT INTO `usuario` (`usuario_id`, `nombre`, `telefono`, `color_favorito`, `pizza`) VALUES
(1, 'Fulanito', '123456', 'Verde', 1),
(2, 'Sutanito', '654321', 'Azul', 0);

Después hay que crear un script en PHP que devuelva los datos en formato JSON, para este caso vamos a usar Zend Framework para abstraer el enlace a la base de datos, adentro del código pongo los comentarios necesarios.

Código PHP:

Ver original<?php
// Establecemos el Path a las librerias de Zend Framework
set_include_path(get_include_path(). PATH_SEPARATOR . 'C:\WebRoot\Zend\ZendFramework-1.9.0\library');
 
// Registramos el Autoloader para evitar cargar todas las clases manualmente
require 'Zend/Loader/Autoloader.php';
$autoloader = Zend_Loader_Autoloader::getInstance();
 
// Establecemos los datos de conexion
$dbSettings = array(
    'host'     => 'localhost',
    'username' => 'root',
    'password' => 'mypwd',
    'dbname'   => 'test'
);
 
// Creamos una instancia de Zend_Db_Adapter_*
$db = Zend_Db::factory('Pdo_Mysql', $dbSettings);
 
// Preparamos un array para la respuesta
$response = array();
 
// Obtenemos el ID de usuario desde POST
$UsuarioID = (int) $_POST['usuario_id'];
 
// Comprobamos que hayan datos
if ($UsuarioID <= 0) {
    $response['error'] = 'El parámetro UsuarioID es incorrecto';
}
 
// Generamos el Select y extraemos los datos
$select = $db->select();
$select->from('usuario', '*')->where('usuario_id=?', $UsuarioID);
$db->setFetchMode(Zend_Db::FETCH_ASSOC);
$userData = $db->fetchRow($select);
 
// Si fue encontrado agregamos los datos si no mostramos un error
if ($userData === false) {
    $response['error'] = 'El usuario no fue encontrado';
} else {
    $response['data'] = $userData;
    $response['error'] = 'ok';
}
 
// Enviamos la respuesta de regreso al script
header('Content-type: text/plain');
echo json_encode($response);

Posteriormente en nuestra pagina web preparamos todo para recibir los datos del servidor:

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
  <script type="text/javascript">
  function getData() {
    resetData(true);
    var usuario_id = parseInt($('#usuario_id').val());
    if (usuario_id > 0) {
        $.post('get_data.php', {usuario_id: usuario_id}, function (response) {
            if (response.error != 'ok') {
                alert(response.error);
            } else {
                var record = response.data;
                $('#nombre').val(record.nombre);
                $('#telefono').val(record.telefono);
                $('#color_favorito').val(record.color_favorito);
                if (record.pizza == "1") {
                    $('#pizza')[0].checked = true;
                }
            }
        }, 'json');
    } else {
        alert('#Por favor pon un numero mayor a 0');
    }
  }
  
  function resetData(keepUser) {
    if(keepUser != true) {
       $('#usuario_id').val('');
    }
    $('#nombre').val('');
    $('#telefono').val('');
    $('#color_favorito').val('');
    $('#pizza')[0].checked = false;
  }
  </script>
  <title>Ejemplo de JQuery con JSON/Zend Framework</title>
</head>
<body>
<form action="file.php" method="post">
    <table>
        <tr>
            <td>ID de Usuario:</td>
            <td>
                <input type="text" name="usuario_id" id="usuario_id" value="" />
                <input type="button" name="get_data" value="Obtener Datos" onclick="getData();"></td>
        </tr>
        <tr>
            <td>Nombre:</td>
            <td><input type="text" name="nombre" id="nombre" value="" /></td>
        </tr>
        <tr>
            <td>Telefono:</td>
            <td><input type="text" name="telefono" id="telefono" value="" /></td>
        </tr>
        <tr>
            <td>Color favorito:</td>
            <td>
                <select name="color_favorito" id="color_favorito">
                    <option value="">- Select -</option>
                    <option value="Verde">Verde</option>
                    <option value="Rojo">Rojo</option>
                    <option value="Azul">Azul</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Te gusta la Pizza?</td>
            <td><input type="checkbox" value="1" name="pizza" id="pizza" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" name="guardar" value="Guardar" onclick="" />
                <input type="button" name="borrar" value="Limpiar" onclick="resetData(false);" />
            </td>
        </tr>
    </table>
</form>
</body>
</html>

Aquí la parte interesante es el tratar los datos de regreso con JSON, esto se hace en el callback que pasamos a $.post, que es esta parte:

Código Javascript:

Ver original$.post('get_data.php', {usuario_id: usuario_id}, function (response) {
            if (response.error != 'ok') {
                alert(response.error);
            } else {
                var record = response.data;
                $('#nombre').val(record.nombre);
                $('#telefono').val(record.telefono);
                $('#color_favorito').val(record.color_favorito);
                if (record.pizza == "1") {
                    $('#pizza')[0].checked = true;
                }
            }
        }, 'json');

Aquí le decimos a JQuery que vamos a hacer un POST al archivo get_data.php pasandole un parámetro, posteriormente en el callback leemos en var record = response.data; el registro que devolvimos desde el server y se lo asignamos a los campos del formulario.

Espero que con este mini tutorial puedan ver como funciona el traer datos codificados en JSON y poder manipularlos en Javascript.

Saludos

a83 · #2 (**permalink**) 16/08/2009, 22:48

donde esta esto? esta interesante el codigo gator v

donde esta esto

Código PHP:

  require 'Zend/Loader/Autoloader.php';

es una clase o estoy mal ? que funcion cumple

GatorV · #3 (**permalink**) 17/08/2009, 09:52

Es parte de la librería de Zend Framework, por eso el tutorial indica que es para trabajarse con Zend Framework.

Saludos.

cesarpunk · #4 (**permalink**) 18/08/2009, 15:33

hola gatorv, esta muy interesante, pero cual es la ventaja de esto contra una consulta simple con ajax y php

GatorV · #5 (**permalink**) 18/08/2009, 20:40

Simplemente es una forma de hacerlo con Zend y JQuery

dquijote80 · #6 (**permalink**) 19/05/2011, 02:00

Muchas gracias GatorV, muy práctico que es de lo que se trata. Yo que vengo del mundo Java y estoy intentando meterme en el mundillo (PHP, Zend, ZendX (jquery, he renunciado de momento a DOJO)...) lo he visto muy útil.

Una preguntilla sobre best practices, que suelto al aire:
En la vista en teoría debería haber el mínimo de Lógica de negocio, pero ¿es mejor devolver un JSON o un objeto model (zend) en la respuesta para la vista?

No se si se sale del tema del hilo, si es así perdón por el error. Estoy aprendiendo y no quiero coger malos vicios J

Muchas gracias otra vez
Saludos

joniso · #7 (**permalink**) 05/07/2011, 08:06

El tutorial excelente tutorial, muchas gracias GatorV.

Solo una pregunta, si quisiera recuperar recuperar los datos JSON mediante Zend a partir del ejemplo ¿como obtengo el parámetro para decodificar los datos?

Código PHP:

Ver original$data = Zend_Json::decode($param);
 
$nombre = $data->nombre;
$tel =  $data->telefono;

GatorV · #8 (**permalink**) 06/07/2011, 10:21

Mediante el ejemplo los datos se enviarán así directamente por un POST regular, si quieres volver a enviarlos mediante AJAX tendrías que implementar esa parte y sí, usar Zend_Json para decodificar los datos.

Saludos.