Antonio Ríos

Gracias a NESS ROMAN que estuvo observando el ejemplo anterior, encontró algunos errores si se puede decir así, me explica que de acuerdo al código del script está seleccionando varios códigos postales sin considerar los datos anteriormente seleccionados (estado y dirección municipal), bueno es cierto, el problema en sí radica que la tabla no está normalizada, si lo estuviera trabajaríamos directamente con los códigos y no con las descripciones y esto evitaría el problema que se presenta.

Bueno haremos las cambios solicitados para esta entrada y ampliar el tema AJAX y las consultas utilizando 2 cosas nuevas la 1ra es usando el método POST donde podrán encontrar en internet muchos ejemplos y el 2do e importante es utilizar una función en JavaScript llamada formData2QueryString que encontré hace mucho en un libro y me parece interesante compartir con ustedes.

Qué hace esta función, comúnmente encontramos que al hacer POST enviamos en el método send de AJAX los parámetros que se envía de esta manera var1=valor1&var2=valor2…. etc. es fácil concatenar esto pero que pasaría si tuvieramos muchos campos y de diferente tipo (input, select,textarea, etc) en el formulario, esta función hace esto (concatenar los campos y sus valores) por nosotros y considera hasta campos con muchos valores (como indica en la ayuda collapseMulti), espero lo entiendan y seguir recibiendo sus comentarios.

Empecemos, lo primero es la página principal

listaejemplo2.htm

<form id="f1" action="cargar2.php" method="post">
<table border="1" width="40%" bgcolor="#FFFFCC">
<tbody>
<tr>
<td width="20px">Estado:</td>
<td><input id="carga" name="carga" type="hidden" />
<select id="sEst" name="sEst"></select></td>
</tr>
<tr>
<td>Delemuni:</td>
<td><select id="sDM" name="sDM"></select></td>
</tr>
<tr>
<td>Colonia:</td>
<td><select id="sCol" name="sCol"></select></td>
</tr>
<tr>
<td>Cod.Postal:</td>
<td><select id="sCP" name="sCP" size="2"></select></td>
</tr>
</tbody>
</table>
</form>

Luego insertamos en este script el código javascript

<script language="JavaScript" type="text/javascript" src="formdata2querystring.js">
</script><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(obId) {
var obCarga = document.getElementById('carga').value=obId;
var obCon = document.getElementById(obId);
obForm = formData2QueryString(document.f1);
obXHR.open('POST', 'cargar2.php');
obXHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
obXHR.onreadystatechange = function() {
if (obXHR.readyState == 4 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; obXHR.status == 200) {
obXML = obXHR.responseXML;
obDes = obXML.getElementsByTagName("descri");
obCon.length=obDes.length;
for (var i=0; i
obCon.options[i].value=obDes[i].firstChild.nodeValue;
obCon.options[i].text=obDes[i].firstChild.nodeValue;
}
}
}
obXHR.send(obForm);
}
</script>

El script PHP que trabajará en el servidor sería:

carga2.php

sql=$sql;
$this->cn = mysql_connect("localhost","usuario","clave");
mysql_select_db("postales");
$this->cargar();
}

function cargar() {
$this->rs=mysql_query($this->sql);
header('Content-Type: text/xml');
echo "\n";
echo "\n";
echo "Seleccione";
while (list($descri) = mysql_fetch_row($this->rs)){
echo "$descri\n";
}
echo "\n";
}

function __destruct() {
mysql_close($this->cn);
}
}
extract($_POST);

switch ($carga){
case 'sEst':	$sql = "SELECT DISTINCT estado FROM codigos"; break;
case 'sDM':	$sql = "SELECT DISTINCT delemuni FROM codigos WHERE estado='$sEst' ORDER BY delemuni"; break;
case 'sCol':	$sql = "SELECT DISTINCT colonia FROM codigos WHERE estado='$sEst' AND delemuni='$sDM' ORDER BY colonia";	break;
default:	$sql = "SELECT DISTINCT cp FROM codigos WHERE estado='$sEst' AND delemuni='$sDM' AND colonia='$sCol' ORDER BY cp";
}

$clCar = new cargar($sql);

?>

Agregamos al script html las siguientes sentencias, para generar las autocargas con AJAX:

onload="cargar('sEst')"
<select id="sEst" name="sEst" onchange="cargar('sDM')"></select>
<select id="sDM" name="sDM" onchange="cargar('sCol')"></select>
<select id="sCol" name="sCol" onchange="cargar('sCP')"></select>

Pueden probar el ejemplo aquí

Puedes ver el ejemplo enviando datos mediante el método GET aquí

Descargar los archivos para este ejemplo aquí

Gracias nuevamente a NESS

Y seguiremos visitando este mundo fascinante de AJAX en próximas entradas.

Hasta pronto.