Hola. Solución propuestas al ejercicio CU01206F del curso básico de programación web: Ajax desde cero.
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.
Código 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+'"> <a href="http://aprendehtml.byethost3.com/Ajax/CU01206F/datosCU01206F.php">' + 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>
Php
<meta charset = "utf-8"/>
<?php // Datos $pais[0]="spain"; $pais[1]="mexico"; $pais[2]="argentina"; $pais[3]="colombia"; $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]="Medellín"; $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é"; $enlaceCiudad[0][0]="https://es.wikipedia.org/wiki/Madrid"; $enlaceCiudad[0][1]="https://es.wikipedia.org/wiki/Barcelona"; $enlaceCiudad[0][2]="https://es.wikipedia.org/wiki/Valencia"; $enlaceCiudad[0][3]="https://es.wikipedia.org/wiki/Sevilla"; $enlaceCiudad[0][4]="https://es.wikipedia.org/wiki/Zaragoza"; $enlaceCiudad[0][5]="https://es.wikipedia.org/wiki/Málaga"; $enlaceCiudad[0][6]="https://es.wikipedia.org/wiki/Murcia"; $enlaceCiudad[1][0]="https://es.wikipedia.org/wiki/Ciudad_de_M%C3%A9xico"; $enlaceCiudad[1][1]="https://es.wikipedia.org/wiki/Ecatepec_de_Morelos"; $enlaceCiudad[1][2]="https://es.wikipedia.org/wiki/Guadalajara_(M%C3%A9xico)"; $enlaceCiudad[1][3]="https://es.wikipedia.org/wiki/Puebla"; $enlaceCiudad[1][4]="https://es.wikipedia.org/wiki/Ciudad_Ju%C3%A1rez"; $enlaceCiudad[1][5]="https://es.wikipedia.org/wiki/Tijuana"; $enlaceCiudad[1][6]="https://es.wikipedia.org/wiki/Le%C3%B3n_(Guanajuato)"; $enlaceCiudad[1][7]="https://es.wikipedia.org/wiki/Zapopan"; $enlaceCiudad[2][0]="https://es.wikipedia.org/wiki/Buenos_Aires"; $enlaceCiudad[2][1]="https://es.wikipedia.org/wiki/Ciudad_de_C%C3%B3rdoba_(Argentina)"; $enlaceCiudad[2][2]="https://es.wikipedia.org/wiki/Rosario_(Argentina)"; $enlaceCiudad[2][3]="https://es.wikipedia.org/wiki/La_Plata"; $enlaceCiudad[2][4]="https://es.wikipedia.org/wiki/Mar_del_Plata"; $enlaceCiudad[2][5]="https://es.wikipedia.org/wiki/San_Miguel_de_Tucum%C3%A1n"; $enlaceCiudad[2][6]="https://es.wikipedia.org/wiki/Ciudad_de_Salta"; $enlaceCiudad[3][0]="https://es.wikipedia.org/wiki/Bogot%C3%A1"; $enlaceCiudad[3][1]="https://es.wikipedia.org/wiki/Medell%C3%ADn"; $enlaceCiudad[3][2]="https://es.wikipedia.org/wiki/Cali"; $enlaceCiudad[3][3]="https://es.wikipedia.org/wiki/Barranquilla"; $enlaceCiudad[3][4]="https://es.wikipedia.org/wiki/Cartagena_de_Indias"; $enlaceCiudad[3][5]="https://es.wikipedia.org/wiki/C%C3%BAcuta"; $enlaceCiudad[3][6]="https://es.wikipedia.org/wiki/Soledad_(Atl%C3%A1ntico)"; $enlaceCiudad[3][7]="https://es.wikipedia.org/wiki/Ibagu%C3%A9"; // Rescatamos el parámetro pais que nos llega mediante la url que invoca xmlhttp $paisRecibido=$_REQUEST["pais"]; $ciudadesDevueltas=""; $existePais = false; for ($i = 0; $i<count($pais) ; $i++) { if ($paisRecibido == $pais[$i]) { $indicePais = $i; $existePais=true; } } $msg = 'El pais recibido por get en segundo plano es '.$paisRecibido ; if ($existePais) { $msg = $msg. ' y tiene indice '.$indicePais; } $ciudadesRespuesta = ""; // Creamos el array a devolver for ($i = 0; $i<count($ciudad[$indicePais]) ; $i++) { $ciudadesRespuesta .= ",".'<a target="_blank" href="'. $enlaceCiudad[$indicePais][$i] . '">' . $ciudad[$indicePais][$i] . '</a>'; } echo $msg.$ciudadesRespuesta;?>
http://aprendehtml.byethost3.com/Ajax/CU01206F/cursoAjaxCU01206F.html
Saludos.