Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: pedro,, en 14 de Marzo 2016, 19:09
-
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.
-
Buenos días Pedro el código hace correctamente lo que pedía el ejercicio
Hay una línea ¿mal definida?:
contenidosAMostrar = contenidosAMostrar+'<div id="ciudades'+i+'"> <a href="http://aprendehtml.byethost3.com/Ajax/CU01206F/datosCU01206F.php">' + contenidosRecibidos[i]+ '</a></div>';
Aquí parece que basta con:
contenidosAMostrar = contenidosAMostrar+'<div id="ciudades'+i+'">' + contenidosRecibidos[i]+ '</div>';
No sé si incluiste eso con algún motivo específico o si se quedó porque el código inicial de ejemplo incluía el mismo enlace para todas las ciudades.
De cualquier manera, en caso de incluir una ruta en tu propio servidor (sobre tu propio sistema de archivos) siempre se recomienda usar rutas relativas en lugar de rutas absolutas. La ruta absoluta es la ruta completa (tal cual la escribirías en un navegador) mientras que la ruta relativa se basa en el directorio donde tienes el archivo. En este caso si el archivo php está en el mismo directorio que el archivo html la ruta relativa sería simplemente el nombre del archivo. Se habla de esto en https://www.aprenderaprogramar.com/foros/index.php?topic=390.0
En esta línea hay un espacio antes del comienzo del nombre de archivo:
xmlhttp.open("GET"," datosCU01206F.php?pais="+str);
Te recomiendo eliminar ese espacio porque podría traer problemas (podría).
Saludos
-
Hola Mario.
En realidad esa parte del código es algo que se me pasó por alto quitar.
Gracias por la corrección.
-
alguien es tan amable de explicarme como puedo subir al servidor los archivos?
tengo poca experiencia en desarrollo web y me gustaria comenzar con este ejemplo
-
Buenas miziloner.
Puedes ver en este enlace como subir archivos a un servidor usando filezilla
https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=538:subir-ficheros-al-servidor-ftp-trajabar-en-remoto-crear-una-pagina-web-con-programacion-php-cu00814b&catid=70&Itemid=193
Saludos. ;D