1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejercicios resueltos Ajax: Recuperar datos archivo servidor tiempo real CU01206F
« 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
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
EJERCICIOcódigo html
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: [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 phpCó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;
?>