AplicacionesWeb

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.

Vía ribosomatic.com

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()"><?phpwhile($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 resultadoecho 	"<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" xsrc="ajax.js" mce_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()"><?phpwhile($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.

Articulos relacionados:

• Sigma Grid, datagrid editable hecho con Ajax
• Botones Tabuladores con Ajax
• Recopilacion de librerias javascript / Ajax Drag & drop
• Ajax, editar directamente en la tabla de resultados
• Clases y objetos con Mootools