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

settezza · « **en:** 23 de Septiembre 2019, 04:52 »

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;
?>

Ogramar · « **Respuesta #1 en:** 29 de Julio 2020, 20:18 »

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

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: