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.
Fuente: ribosomatic
Comentarios recientes