EJERCICIO
Tomando como punto de partida el código de ejemplo que hemos visto en esta entrega, realiza las modificaciones oportunas en los archivos php y html para:
a) Definir una url asociada a cada ciudad (usa la url de la ciudad en wikipedia, por ejemplo para la ciudad Medellín será https://es.wikipedia.org/wiki/Medell%C3%ADn)
b) Hacer que cuando se elige un país en el combobox, cada ciudad aparezca con el link a su url en wikipedia y que si se pulsa en ese link se abra una nueva ventana en el navegador mostrando la url correspondiente.
CODIGO HTML
<!DOCTYPE html>
<html>
<head>
<title>Cursos aprende a programar</title>
<meta charset="utf-8">
<style type="text/css">
*{font-family:sans-serif;} a:link {text-decoration:none;} select{font-size:18px;}
div div {color: blue; background-color:#F1FEC6; font-size: 20px; float:left; border: solid; margin: 20px; padding:15px;}
</style>
<script>
function mostrarSugerencia(str) {
var xmlhttp;
var contenidosRecibidos = new Array();
var nodoMostrarResultados = document.getElementById('listaCiudades');
var contenidosAMostrar = '';
if (str.length==0) { document.getElementById("txtInformacion").innerHTML=""; nodoMostrarResultados.innerHTML = ''; return; }
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
contenidosRecibidos = xmlhttp.responseText.split(",");
document.getElementById("txtInformacion").innerHTML=contenidosRecibidos[0];
for (var i=1; i<contenidosRecibidos.length;i++) {
contenidosAMostrar = contenidosAMostrar+'<div id="ciudades'+i+'" title="Click para ver mas información"> ' + contenidosRecibidos[i]+ '</div>';
//contenidosAMostrar = contenidosAMostrar+'<div id="ciudades'+i+'"> <a href="http://aprenderaprogramar.com">' + contenidosRecibidos[i]+ //'</a></div>';
}
nodoMostrarResultados.innerHTML = contenidosAMostrar;
}
};
xmlhttp.open("GET"," datosCU01206F.php?pais="+str);
xmlhttp.send();
}
</script>
</head>
<body style="margin:20px;">
<h2>Elige un país:</h2>
<form action="">
<select onchange="mostrarSugerencia(this.value)">
<option value="none">Elige</option>
<option value="spain">España</option>
<option value="mexico">México</option>
<option value="argentina">Argentina</option>
<option value="colombia">Colombia</option>
</select>
</form>
<br/>
<p>Informacion sobre operacion en segundo plano con Ajax: <span style="color:brown;" id="txtInformacion"></span></p>
<div id="listaCiudades"> </div>
</body>
</html>
CODIGO PHP
<meta charset = "utf-8"/>
<?php // Datos$pais[0]="spain"; $pais[1]="mexico"; $pais[2]="argentina"; $pais[3]="colombia";$ciudad[0][0]="<a href='https://es.wikipedia.org/wiki/Madrid' target='_blank'>Madrid</a> "; $ciudad[0][1]="<a href='https://es.wikipedia.org/wiki/Barcelona' target='_blank'>Barcelona</a> "; $ciudad[0][2]="<a href='https://es.wikipedia.org/wiki/Valencia' target='_blank'>Valencia</a> "; $ciudad[0][3]="<a href='https://es.wikipedia.org/wiki/Sevilla' target='_blank'>Sevilla</a> ";$ciudad[0][4]="<a href='https://es.wikipedia.org/wiki/Zaragoza' target='_blank'>Zaragoza</a> "; $ciudad[0][5]="<a href='https://es.wikipedia.org/wiki/M%C3%A1laga' target='_blank'>Málaga</a> "; $ciudad[0][6]="<a href='https://es.wikipedia.org/wiki/Murcia' target='_blank'>Murcia</a> ";$ciudad[1][0]="<a href='https://es.wikipedia.org/wiki/Ciudad_de_M%C3%A9xico' target='_blank'>México D.F.</a> "; $ciudad[1][1]="<a href='https://es.wikipedia.org/wiki/Ecatepec_de_Morelos' target='_blank'>Ecatepec</a> ";$ciudad[1][2]="<a href='https://es.wikipedia.org/wiki/Guadalajara_(M%C3%A9xico)' target='_blank'>Guadalajara</a> "; $ciudad[1][3]="<a href='https://es.wikipedia.org/wiki/Puebla' target='_blank'>Puebla</a> ";$ciudad[1][4]="<a href='https://es.wikipedia.org/wiki/Ciudad_Ju%C3%A1rez' target='_blank'>Juárez</a> "; $ciudad[1][5]="<a href='https://es.wikipedia.org/wiki/Tijuana' target='_blank'>Tijuana</a> "; $ciudad[1][6]="<a href='https://es.wikipedia.org/wiki/Le%C3%B3n_(M%C3%A9xico)' target='_blank'>León</a> "; $ciudad[1][7]="<a href='https://es.wikipedia.org/wiki/Zapopan' target='_blank'>Zapopan</a> ";$ciudad[2][0]="<a href=https://es.wikipedia.org/wiki/Buenos_Aires' target='_blank'>Buenos Aires</a> "; $ciudad[2][1]="<a href='https://es.wikipedia.org/wiki/C%C3%B3rdoba_(Argentina)' target='_blank'>Córdoba</a> "; $ciudad[2][2]="<a href='https://es.wikipedia.org/wiki/Rosario_(Argentina)' target='_blank'>Rosario</a> "; $ciudad[2][3]="<a href='https://es.wikipedia.org/wiki/La_Plata' target='_blank'>La Plata</a> ";$ciudad[2][4]="<a href='https://es.wikipedia.org/wiki/Mar_del_Plata' target='_blank'>Mar del Plata</a> "; $ciudad[2][5]="<a href='https://es.wikipedia.org/wiki/San_Miguel_de_Tucum%C3%A1n' target='_blank'>San Miguel de Tucumán</a> "; $ciudad[2][6]="<a href='https://es.wikipedia.org/wiki/Salta' target='_blank'>Ciudad de Salta</a> ";$ciudad[3][0]="<a href='https://es.wikipedia.org/wiki/Bogot%C3%A1' target='_blank'>Bogotá</a> "; $ciudad[3][1]="<a href='https://es.wikipedia.org/wiki/Medell%C3%ADn' target='_blank'>Medellin</a> "; $ciudad[3][2]="<a href='https://es.wikipedia.org/wiki/Cali' target='_blank'>Cali</a> "; $ciudad[3][3]="<a href='https://es.wikipedia.org/wiki/Barranquilla' target='_blank'>Barranquilla</a> ";$ciudad[3][4]="<a href='https://es.wikipedia.org/wiki/Cartagena_de_Indias' target='_blank'>Cartagena</a> "; $ciudad[3][5]="<a href='https://es.wikipedia.org/wiki/C%C3%BAcuta' target='_blank'>Cúcuta</a> "; $ciudad[3][6]="<a href='https://es.wikipedia.org/wiki/Soledad_(Atl%C3%A1ntico)' target='_blank'>Soledad</a> "; $ciudad[3][7]="<a href='https://es.wikipedia.org/wiki/Ibagu%C3%A9' target='_blank'>Ibagué</a> ";/*$ciudad[0][0]="Madrid"; $ciudad[0][1]="Barcelona"; $ciudad[0][2]="Valencia"; $ciudad[0][3]="Sevilla";$ciudad[0][4]="Zaragoza"; $ciudad[0][5]="Málaga"; $ciudad[0][6]="Murcia";$ciudad[1][0]="México D.F."; $ciudad[1][1]="Ecatepec"; $ciudad[1][2]="Guadalajara"; $ciudad[1][3]="Puebla";$ciudad[1][4]="Juárez"; $ciudad[1][5]="Tijuana"; $ciudad[1][6]="León"; $ciudad[1][7]="Zapopan";$ciudad[2][0]="Buenos Aires"; $ciudad[2][1]="Córdoba"; $ciudad[2][2]="Rosario"; $ciudad[2][3]="La Plata";$ciudad[2][4]="Mar del Plata"; $ciudad[2][5]="San Miguel de Tucumán"; $ciudad[2][6]="Ciudad de Salta";$ciudad[3][0]="Bogotá"; $ciudad[3][1]="Medellin"; $ciudad[3][2]="Cali"; $ciudad[3][3]="Barranquilla";$ciudad[3][4]="Cartagena"; $ciudad[3][5]="Cúcuta"; $ciudad[3][6]="Soledad"; $ciudad[3][7]="Ibagué";*/ // Rescatamos el parámetro pais que nos llega mediante la url que invoca xmlhttp//-----------------------------------------------------------------------------$paisRecibido=$_REQUEST["pais"]; $ciudadesDevueltas="";$existePais = false;$ciudadesRespuesta = "";$msg="";for ($i = 0; $i<count($pais) ; $i++) { if ($paisRecibido == $pais[$i]) { $indicePais = $i; $existePais=true; }}if ($paisRecibido == 'none') { $msg = 'El pais recibido por get en segundo plano es none' ; $ciudadesRespuesta = "";}else{ $msg = 'El pais recibido por get en segundo plano es '.$paisRecibido ; if ($existePais) {$msg = $msg. ' y tiene indice '.$indicePais;} // Creamos el array a devolver for ($i = $indicePais; $i<count($ciudad[$indicePais]) ; $i++) { $ciudadesRespuesta .= ",".$ciudad[$indicePais][$i]; } } echo $msg.$ciudadesRespuesta;?>