AJAX y PHP, mostrar una tabla
Hace poco tocamos el caso de llenar una segunda lista desplegable dinámicamente con AJAX, ahora en este post mostraremos el resultado luego de seleccionar la lista desplegable en una tabla (etiqueta table) y lo haremos siempre con AJAX.
Para los que recién empiezan con AJAX es una forma de ver como trabaja, la idea para esta entrada es tener en una lista desplegable todos los departamentos y cada vez que cambiemos de departamento nos muestre en una tabla con AJAX.
tabla_php.php
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ver tabla con AJAX y PHP</title> </head> <body> <div id="idDiv"></div> </body> </html>
Empezamos creando un objeto div contenedor donde almacenaremos la tabla.
Llenamos los datos de la lista desplegable con PHP, para ello creamos la conexión.
< ?php
$cn=mysql_connect("localhost","usuario","clave");
mysql_select_db("bd_anidados");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
Y luego cargamos los departamentos.
<body>
< ?php
echo "<select name='sDep' onChange='cargar(this.value)'>";
echo "<option value='-1'>Seleccione</option>";
$sql="SELECT * FROM departamento";
$rs=mysql_query($sql);
while ($reg=mysql_fetch_array($rs)){
echo "<option value=".$reg['coddep'].">".$reg['desdep']."</option>";
}
echo "";
?>
<div id="idDiv"></div>
Luego la función que creará el objeto AJAX
<title>Ver tabla con AJAX y PHP</title>
<script language="JavaScript" type="text/javascript">
// creando objeto XMLHttpRequest de Ajax
var obXHR;
try {
obXHR=new XMLHttpRequest();
} catch(err) {
try {
obXHR=new ActiveXObject("Msxml2.XMLHTTP");
} catch(err) {
try {
obXHR=new ActiveXObject("Microsoft.XMLHTTP");
} catch(err) {
obXHR=false;
}
}
}
function cargar(dep) {
var obDiv = document.getElementById("idDiv");
obXHR.open("GET", "provi.php?dep="+dep);
obXHR.onreadystatechange = function() {
if (obXHR.readyState == 4 &amp;amp;&amp;amp; obXHR.status == 200) {
obDiv.innerHTML=obXHR.responseText;
}
}
obXHR.send(null);
}
</script>
Para ponerle un poco de color utilizamos CSS
<style>
td {
background-color: #FFFFCC;
color: #000066;
}
th {
background-color: #000099;
color: #FFFFFF;
font-weight: bold;
}
</style>
El script PHP es
provi.php
< ?php
$cn=mysql_connect("localhost","usuario","clave");
mysql_select_db("bd_anidados");
$sql="SELECT * FROM provincia WHERE coddep=".$_GET['dep'];
$rs=mysql_query($sql);
echo "<table border='1' width='25%'>";
echo "<tr><th>Cod</th><th>Nombre</th></tr>";
while ($reg=mysql_fetch_array($rs)){
echo "<tr><td align='center'>".$reg['codpro']."</td>";
echo "<td>".utf8_encode($reg['despro'])."</td></tr>";
}
echo "";
?>
Eso es todo… hasta pronto.