RibosoMatic Blog

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.