Autor Tema: Ejercicios resueltos Ajax: Recuperar datos archivo servidor tiempo real CU01206F  (Leído 1311 veces)

settezza

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 9
    • Ver Perfil
Hola, les dejo el código de posible solución al ejercicio solicitado CU01206F del tutorial de programación Ajax con ejemplos resueltos.

Como comentario al código de ejemplo de este capítulo hay un error o es un cazabobos, el for original está comentado, el problema está en inicializar $i con $indicePais
Citar
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
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
font-family: Lucida Sans Unicode;
}
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;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
<script>
function mostrarSugerencia(str){
var xmlhttp;
var contenidosRecibidos = new Array();
var nodoMostrarResultados = document.getElementById("listaCiudades");
var contenidoAMostrar = "<table><tr><th>Ciudad</th><th>URL</th></tr>"
var parteUrl;
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(",");
parteUrl = parseInt(contenidosRecibidos.length/2);
document.getElementById("txtInformacion").innerHTML=contenidosRecibidos[0];
for(var i=1; i<contenidosRecibidos.length/2; i++){
contenidoAMostrar=contenidoAMostrar+"<tr><td>"+contenidosRecibidos[i]+"</td><td><a href="+
contenidosRecibidos[i+parteUrl]+">"+contenidosRecibidos[i+parteUrl]+"</a></td></tr>";
}
nodoMostrarResultados.innerHTML=contenidoAMostrar+"</table>";
}
}
xmlhttp.open("GET","CU01206E.php?pais="+str);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Elige un pais:</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="chile">Chile</option>
<option value="colombia">Colombia</option>
<option value="argentina">Argentina</option>
</select>
</form>
<br/>
<p>Información sobre operación en segundo plano con Ajax: <span style="color: brown" id="txtInformacion"></span></p>
<div id="listaCiudades"> </div>
</body>
</html>
código php
Código: [Seleccionar]
<meta charset="utf-8">
<?php
$pais[0]="spain";
$pais[1]="mexico";
$pais[2]="chile";
$pais[3]="colombia";
$pais[]="argentina";
$ciudad[0][0]="Madrid";
$ciudad[0][1]="Sevilla";
$ciudad[0][2]="Barcelona";
$ciudad[0][3]="Valencia";
$ciudad[0][4]="Santa Cruz de Tenerife";
$ciudad[1][0]="México DF";
$ciudad[1][1]="Guadalajara";
$ciudad[1][2]="Tijuana";
$ciudad[1][3]="Puebla";
$ciudad[2][0]="Santiago";
$ciudad[2][1]="Valpariso";
$ciudad[2][2]="Concepción";
$ciudad[2][3]="La Serena";
$ciudad[2][4]="Puerto Montt";
$ciudad[2][5]="Valdivia";
$ciudad[2][6]="Puerto Natales";
$ciudad[3][0]="Bogotá";
$ciudad[3][1]="Medellín";
$ciudad[3][2]="Barranquilla";
$ciudad[3][3]="Cartagena";
$ciudad[4][0]="Buenos Aires";
$ciudad[4][1]="Mendoza";
$ciudad[4][2]="San Miguel de Tucumán";
$ciudad[4][3]="Córdova";
$sitios[0][0]="https://es.wikipedia.org/wiki/Madrid";
$sitios[0][1]="https://es.wikipedia.org/wiki/Sevilla";
$sitios[0][2]="https://es.wikipedia.org/wiki/Barcelona";
$sitios[0][3]="https://es.wikipedia.org/wiki/Valencia";
$sitios[0][4]="https://es.wikipedia.org/wiki/Santa_Cruz_de_Tenerife";
$sitios[1][0]="https://es.wikipedia.org/wiki/Ciudad_de_M%C3%A9xico";
$sitios[1][1]="https://es.wikipedia.org/wiki/Guadalajara_(M%C3%A9xico)";
$sitios[1][2]="https://es.wikipedia.org/wiki/Tijuana";
$sitios[1][3]="https://es.wikipedia.org/wiki/Puebla";
$sitios[2][0]="https://es.wikipedia.org/wiki/Santiago_de_Chile";
$sitios[2][1]="https://es.wikipedia.org/wiki/Valpara%C3%ADso";
$sitios[2][2]="https://es.wikipedia.org/wiki/Concepci%C3%B3n_(Chile)";
$sitios[2][3]="https://es.wikipedia.org/wiki/La_Serena_(Chile)";
$sitios[2][4]="https://es.wikipedia.org/wiki/Puerto_Montt";
$sitios[2][5]="https://es.wikipedia.org/wiki/Valdivia";
$sitios[2][6]="https://es.wikipedia.org/wiki/Puerto_Natales";
$sitios[3][0]="https://es.wikipedia.org/wiki/Bogot%C3%A1";
$sitios[3][1]="https://es.wikipedia.org/wiki/Medell%C3%ADn";
$sitios[3][2]="https://es.wikipedia.org/wiki/Barranquilla";
$sitios[3][3]="https://es.wikipedia.org/wiki/Cartagena_de_Indias";
$sitios[4][0]="https://es.wikipedia.org/wiki/Buenos_Aires";
$sitios[4][1]="https://es.wikipedia.org/wiki/Mendoza_(Argentina)";
$sitios[4][2]="https://es.wikipedia.org/wiki/San_Miguel_de_Tucumán";
$sitios[4][3]="https://es.wikipedia.org/wiki/C%C3%B3rdoba_(Argentina)";

// RESCATAMOS EL PARAMETRO PAIS QUE NOS LLEGA MEDIANTE LA URL QUE INVOCA xmlhttp

$paisRecibido $_REQUEST["pais"]; 
$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;
}
$ciudadRespuesta "";
$urlDevuelta "";

//  CREAMOS EL ARRAY A DEVOLVER
for($j=0$j<count($ciudad[$indicePais]); $j++){
$ciudadRespuesta .= ",".$ciudad[$indicePais][$j];
$urlDevuelta .= ",".$sitios[$indicePais][$j];
}
/*for($i=$indicePais; $i<count($ciudad[$indicePais]); $i++){
$ciudadRespuesta .= ",".$ciudad[$indicePais][$i];
}*/
echo $msg.$ciudadRespuesta.$urlDevuelta;
?>
« Última modificación: 29 de Julio 2020, 20:17 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2640
    • Ver Perfil
Buenas, para quien revise este ejercicio está bien resuelto y realiza lo que se pedía. Podría resolverse de otras maneras (por ejemplo incluyendo el link en el propio texto), pero como se ha hecho con una tabla se ve bastante bien.

Respecto a la errata comentada, coincido en que se trataba de un error y lo he comunicado para que lo revisen. Agradecemos que se comunique cualquier error o incidencia que se encuentre en la web o en los cursos.

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".