Autor Tema: Ejercicios de Ajax ejemplo sencillo básico código objeto XMLHttpRequest CU01206F (Leído 3730 veces)

DRANXZ88 · « **en:** 03 de Octubre 2018, 19:55 »

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.

CODIGO HTML

Código: [Seleccionar]

<!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

Código: [Seleccionar]

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

Ogramar · « **Respuesta #1 en:** 03 de Agosto 2019, 23:51 »

Buenas, para quien revise este ejercicio, funciona correctamente y realiza lo que se pedía. Podrían comentarse algunos detalles sobre eficiencia en el uso de recursos (espacio de memoria) y mantenibilidad del código, aunque no es el objetivo del curso entrar en estos detalles. No obstante, para quien tenga curiosidad, dejo una pregunta en el aire: si comparamos este código con el propuesto en https://aprenderaprogramar.com/foros/index.php?topic=4198.0 ¿Qué ventajas tendría uno y otro? ¿Qué ocurriría si en vez de veinte o treinta datos trabajáramos con miles de datos?

Salu2

nella_orias · « **Respuesta #2 en:** 23 de Mayo 2022, 03:50 »

En ese mismo ejemplo a la hora de ingresar el país , no me muestra las carácterísticas del país sino el código php, cómo lo soluciono?
Estoy trabajando en apache netbeans 12.6
Muesta lo siguiente:

".$ciudad[$indicePais][$i]; } echo $msg.$ciudadesRespuesta; ?>

Por favor su pronta ayuda

Ogramar · « **Respuesta #3 en:** 24 de Mayo 2022, 20:39 »

Buenas, como este hilo es antiguo y ha transcurrido mucho tiempo es preferible que crees un hilo nuevo. Procederé a borrar el mensaje para que quede este hilo como estaba. Para escribir en los foros es importante seguir las normas que se indican en https://aprenderaprogramar.com/foros/index.php?topic=1460.0
Si lo deseas, crea un nuevo tema de nuevo siguiendo las normas citadas y pega tu código usando las etiquetas code. Es probable que el problema se deba a un fallo en tu código, de ahí que sea importante pegar el código correctamente. Si tienes dudas sobre cómo escribir en los foros escribe una consulta en el foro "Comunidad" exponiendo la duda para intentar solucionarla. Salu2

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

Noticias:

Autor Tema: Ejercicios de Ajax ejemplo sencillo básico código objeto XMLHttpRequest CU01206F (Leído 3730 veces)

DRANXZ88

Ejercicios de Ajax ejemplo sencillo básico código objeto XMLHttpRequest CU01206F

Ogramar

Re:Ejercicios de Ajax ejemplo sencillo básico código objeto XMLHttpRequest CU01206F

nella_orias

Re: Ejercicios de Ajax ejemplo sencillo básico código objeto XMLHttpRequest CU01206F

Ogramar

Re: Ejercicios de Ajax ejemplo sencillo básico código objeto XMLHttpRequest CU01206F

Preguntas y respuestas