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
// 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
'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
// 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');
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">
<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;
}
<title>Ejemplo de JQuery con JSON/Zend Framework
</title> <form action="file.php" method="post"> <input type="text" name="usuario_id" id="usuario_id" value="" /> <input type="button" name="get_data" value="Obtener Datos" onclick="getData();"></td> <td><input type="text" name="nombre" id="nombre" value="" /></td> <td><input type="text" name="telefono" id="telefono" value="" /></td> <select name="color_favorito" id="color_favorito"> <td>Te gusta la Pizza?
</td> <td><input type="checkbox" value="1" name="pizza" id="pizza" /></td> <input type="button" name="guardar" value="Guardar" onclick="" /> <input type="button" name="borrar" value="Limpiar" onclick="resetData(false);" />
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
