Buenas tardes a todo el equipo de aprenderaprogramar.com
Mediante la presente hago entrega de la última entrega CU01216F del curso de programación web con Ajax desde cero.
Quería agradecer, una vez más, el gran esfuerzo que hace todo el equipo de aprenderaprogramar.com y decir que me ha gustado mucho este curso también. Se me ha brindado la oportunidad de aprender aún más. Gracias.
El ejercicio:
EJERCICIO
Modifica el código que hemos usado como ejemplo para cumplir con el siguiente propósito:
a) Devolver como respuesta una cadena en formato JSON generada del lado del servidor.
b) Parsear la respuesta recibida del servidor para, ahora del lado del cliente, crear un objeto JavaScript usando JSON.parse.
c) Obtener resultados análogos a los que hemos obtenido, es decir, cuando se seleccione un país deberán mostrarse las ciudades importantes de ese país.
La diferencia entre el ejemplo que hemos visto y el de este ejercicio estará en qué se devuelve del lado del servidor y cómo se trata. En el ejemplo que hemos visto se devuelve una cadena de elementos separados por comas y se trata separándola, mientras que en este ejercicio debes devolver una cadena de texto con formato JSON y tratarla con notación de objetos.
Código utilizado en la entrega como ejemplo:
<!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 paisElegido='';
if (str=='spain') {paisElegido='España';}
else if (str=='mexico') {paisElegido='México';}
else if (str=='argentina') {paisElegido='Argentina';}
else if (str=='colombia') {paisElegido='Colombia';}
else {paisElegido='none';}
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://aprenderaprogramar.com">' + contenidosRecibidos[i]+ '</a></div>';
}
nodoMostrarResultados.innerHTML = contenidosAMostrar;
}
}
var cadenaParametros = 'pais='+encodeURIComponent(paisElegido);
xmlhttp.open('POST', 'ajaxCU01216F.php'); // Método post y url invocada
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // Establecer cabeceras de petición
xmlhttp.send(cadenaParametros); // Envio de parámetros usando POST
}
</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 POST y Ajax: <span style="color:brown;" id="txtInformacion"></span></p>
<div id="listaCiudades"> </div>
</body>
</html>
Solución del ejercicio:
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 paisElegido='';
if(str=='spain'){
paisElegido='España';
}else if(str=='mexico'){
paisElegido='México';
}else if(str=='argentina'){
paisElegido='Argentina';
}else if(str=='colombia'){
paisElegido='Colombia';
}else{
paisElegido='none';
}
var xmlhttp;
if(str.length==0 ||paisElegido=='none'){
document.getElementById("txtInformacion").innerHTML="no hay datos";
mostrarCiudades();
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var jsonResponse = xmlhttp.responseText;
var objeto_json = JSON.parse(jsonResponse);
ciudadesRecibidas = objeto_json.ciudadImportante;
document.getElementById("txtInformacion").innerHTML = 'El país recibido por post en segundo plano son: ' + objeto_json.ciudadImportante[0];
mostrarCiudades(ciudadesRecibidas);
}
}
var cadenaParametros = 'pais='+encodeURIComponent(paisElegido);
xmlhttp.open('POST', 'CU01216F(01).php');
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(cadenaParametros);
}
function mostrarCiudades(arrayCiudades){
var nodoMostrarResultados = document.getElementById('listaCiudades');
if(!arrayCiudades){
nodoMostrarResultados.innerHTML = '';
return
}
var contenidosAMostrar = '';
for(var i=1; i<arrayCiudades.length;i++){
contenidosAMostrar = contenidosAMostrar+'<div id="ciudades'+i+'">';
contenidosAMostrar += '<a href="http://aprenderaprogramar.com">' + arrayCiudades[i]+ '</a></div>';
}
if(contenidosAMostrar){
nodoMostrarResultados.innerHTML = contenidosAMostrar;
}
}
</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>
Código PHP:
<?php // Rescatamos el parámetro que nos llega mediante la url que invoca xmlhttp $pais=$_POST["pais"]; $msg = 'El pais recibido en segundo plano ahora es '.$pais; if ($pais){ $link = mysqli_connect($servidor,$usuario,$contrasena); mysqli_select_db($link, $baseDeDatos); $tildes = $link->query("SET NAMES 'utf8'"); //Para que se muestren las tildes correctamente $result = mysqli_query($link, "SELECT a.ciudadImportante FROM ciudades_importantes AS a, paises AS b WHERE a.idPais = b.id AND nombrePais = '".$pais."'"); $paisYCiudades[0] = $pais; $i=1; while ($fila = mysqli_fetch_array($result)){ $paisYCiudades[$i++] = $fila['ciudadImportante']; } $consulta['ciudadImportante'] = $paisYCiudades; //Devolvemmos la cadena de respuesta echo json_encode($consulta); mysqli_free_result($result); mysqli_close($link); } else { echo 'No se han recibido datos'; }?>
Debo reconocer que para la solución del presente ejercicio he tenido que consultar la solución del compañero Pedro desde el hilo:
https://www.aprenderaprogramar.com/foros/index.php?topic=4287.msg17916#msg17916 (https://www.aprenderaprogramar.com/foros/index.php?topic=4287.msg17916#msg17916)
Gracias.