En esta oportunidad abordaremos nuevamente el tema de consulta a base de datos MySql haciendo uso de ajax + php. Pero la forma de realizar la consulta será distinta al anterior ejemplo.
Objetivo
Deseamos hacer lo siguiente: Mostrar en una lista desplegable los nombres de todos los clientes y al momento de hacer clic en el deseado, en la parte inferior, se muestren sus datos.
Consideraciones previas
Analicemos que parte o partes programaremos en PHP o en JavaScript. Necesitamos el objeto XMLHttpRequest (eso ni dudarlo) asi que lo incluiremos en un archivo llamado ajax.js.
Ahora seguimos analizando y como se nos pide que los nombres de los clientes se muestren en la lista desplegable, entonces escribiremos en PHP un script que se conecte a la base de datos y muestre solo los nombres de todos los clientes, llamaremos a éste lista.php.
Pero se indica que al hacer clic en el nombre del cliente deseado se muestre sus datos. Esto implica 2 procesos, 1) trabajar con un evento tal que al hacer clic realize el proceso, esto puede ser una función en JavaScript y lo podemos incluir en el archivo ajax.js, llamaremos a la función pedirDatos(); y 2) un script PHP que se conecte a la base de datos y muestre todos los datos del cliente deseado, llamamos a este script datoscliente.php.
Ya que lista.php y datoscliente.php se conectan a la base de datos, escribimos un script para que realice una sola conexión, llamémosla conexion.php.
Finalmente creamos un index.php que contendrá la parte principal de nuestro ejemplo a desarrollar.
Manos a la obra
Aquí la tabla clientes con algunos datos.
CREATE TABLE `clientes` ( `id` INTEGER NOT NULL AUTO_INCREMENT, `nombres` VARCHAR(45) NOT NULL DEFAULT '', `direccion` VARCHAR(45) NOT NULL DEFAULT '', `telefono` VARCHAR(10) NOT NULL DEFAULT '', `email` VARCHAR(45) NOT NULL DEFAULT '', PRIMARY KEY(`id`) ) ENGINE = InnoDB; INSERT INTO clientes (nombres, direccion, telefono, email) VALUES ('Victor Jimenez','Av Union 234','457522','victor_j@latin.com'), ('Ivan Fernandez','Jr Mansiche 4564','329005','fernivan@surper.net'), ('Carlos Salazar','Av Peru 878','457845','salazar_234@minerva.viz'), ('Ever Mendez','Av Arequipa 1258','220585','webmaster@yaohi.com.pe'), ('Juan Linares','Pj Villar Int 2','9654563','gutiman@coolmain.ru'), ('Julio Gutierrez','Almendros 984','9784512','juliter@menzat.nu.pe'), ('Manuel Villalobos','Av Cortijo 8282','220578','manu@latin.es');
Empezemos con el script que realizará la conexión a la Base de Datos.
conexion.php
<?php
//Configuracion de la conexion a base de datos
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "ribosomatic";
$con = mysql_connect($bd_host, $bd_usuario, $bd_password);
mysql_select_db($bd_base, $con);
?>
Escribimos dos funciones en JavaScript para 1) usar el objeto XMLHttpRequest y 2) pedir el resultado de la consulta el cual se mostrara en una capa indicada.
ajax.js
function objetoAjax(){ var xmlhttp=false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function pedirDatos(){ //donde se mostrará el resultado divResultado = document.getElementById('resultado'); //tomamos el valor de la lista desplegable nom=document.formulario.lista.value; //instanciamos el objetoAjax ajax=objetoAjax(); //usamos el medoto POST //archivo que realizará la operacion //datoscliente.php ajax.open("POST", "datoscliente.php",true); ajax.onreadystatechange=function() { if (ajax.readyState==4) { //mostrar resultados en esta capa divResultado.innerHTML = ajax.responseText } } ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //enviando los valores ajax.send("nombres="+nom) }
Ahora a listar los nombres de los empleados. Este script realizar un SELECT … FROM … del campo NOMBRES de la tabla clientes e incluye los elementos en una lista desplegable. Nótese que a la lista desplegable se le incluye, en el evento onchange, la función pedirDatos(), la cual especificamos en el archivo ajax.js.
lista.php
<?php
require('conexion.php');
//seleccionamos solo el nombre de los clientes
$sql=mysql_query("SELECT nombres FROM clientes",$con);
?>
<select name="lista" onchange="pedirDatos()">
<?php
while($row = mysql_fetch_array($sql)){
echo "<option>".$row['nombres']."</option>";
}
?>
</select>
Seguimos con mostrar los resultados, para ello hacemos un SELECT … FROM … de los campos dirección, telefono y email, a través del nombre del cliente, el cual será capturado cuando lo seleccionemos de la lista desplegable.
datoscliente.php
<?php
require('conexion.php');
//capturar el nombre del cliente
$nom=$_POST['nombres'];
//seleccionamos los datos del cliente por su nombre
$sql=mysql_query("SELECT * FROM clientes WHERE nombres='".$nom."'",$con);
$row = mysql_fetch_array($sql);
//mostrando el resultado
echo "<p><strong>Direccion</strong></p><p>".$row['direccion']."</p>";
echo "<p><strong>Telefono</strong></p><p>".$row['telefono']."</p>";
echo "<p><strong>Email</strong></p><p>".$row['email']."</p>";
?>
Finalmente, un archivo index.php que contendrá la parte principal de nuestro desarrollo.
index.php
<html>
<head>
<title>Consulta de datos</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<p>Este ejemplo muestra como realizar una consulta de los registros de una tabla usando un control de lista.</p>
<form name="formulario" action="">
<?php
include('lista.php');
?>
</form>
<div id="resultado" style="border:1px solid #FF0000; color:#000099;width:400px;">
</div>
</body>
</html>
El resultado: Cuando seleccionamos un nombre de cliente de la lista desplegable, en la parte inferior de la pagina se mostrará los datos de éste, como su dirección, teléfono y email. Si desean ver el resultado pueden descargarlo o apreciarlo en la sección Ejemplos.
Actualizacion [25·09·06]
Según algunos comentarios (abajo expuestos) la aplicación no funciona en Internet Explorer, sin embargo corregimos el error. A continuación detallamos donde fue la falla.
Corriga el archivo lista.php por el siguiente código:
<?php
require('conexion.php');
//seleccionamos solo el nombre de los clientes
$sql=mysql_query("SELECT nombres FROM clientes",$con);
?>
<select name="lista" onchange="pedirDatos()">
<?php
while($row = mysql_fetch_array($sql)){
echo "<option value=\"".$row['nombres']."\">".$row['nombres']."</option>";
}
?>
</select>
Como se dará cuenta, anteriormente no especificamos ninguno atributo value para las opciones (<option>) de la etiqueta <select>, es por ello que IE no reconocía ninguno valor de la lista y cuando realizaba la consulta no ocurría nada. El archivo comprimido del ejemplo también esta corregido. Gracias por su paciencia.