Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: pedro,, en 28 de Marzo 2016, 00:15
-
Buenas. Aquí dejo una posible solución al ejercicio de la entrega CU01216F del curso de programación web Ajax desde cero.
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.
ejercicioAjaxCU01216F.php
<meta charset="utf-8"/>
<?php
// Rescatamos el parámetro que nos llega mediante la url que invoca xmlhttp
$pais=$_POST["pais"];
//$resultadoConsulta = '';
$msg = 'El pais recibido en segundo plano ahora es '.$pais;
if ($pais) {
$link = mysqli_connect($hostname , $nombreUsuario , $contraseña);
mysqli_select_db($link, $nombreConexión);
$tildes = $link->query("SET NAMES 'utf8'"); //Para que se muestren las tildes correctamente
$result = mysqli_query($link, "SELECT a.nombreCiudad
FROM ciudades_importantes AS a, paises AS b
WHERE a.idPais = b.id
AND nombrePais = '".$pais."'");
$i=0;
while ($fila = mysqli_fetch_array($result)){
$resultadoConsulta[$i++] = $fila['nombreCiudad'];
}
$resultadoConsulta1['nombreCiudad'] = $resultadoConsulta;
//Creamos un string en el que incluimos el contenido con formato JSON
$resultado = json_encode($resultadoConsulta1);
/* Creamos un archivo con el contenido de $resultado para comprobar que se ha creado
* un formato correcto JSON, esto solo lo utilizo como prueba.
*/
$archivo = 'ciudades.json';
file_put_contents($archivo, $resultado);
//Devolvemmos la cadena de respuesta
echo $resultado;
mysqli_free_result($result);
mysqli_close($link);
} else {
echo 'No se han recibido datos';
}
?>
y el 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.split(">");
var objeto_json = JSON.parse(jsonResponse[1]);
ciudadesRecibidas = objeto_json.nombreCiudad;
document.getElementById("txtInformacion").innerHTML = 'Las ciudades recividas por post en segundo plano son: ' + objeto_json.nombreCiudad;
mostrarCiudades(ciudadesRecibidas);
}
}
var cadenaParametros = 'pais='+encodeURIComponent(paisElegido);
xmlhttp.open('POST', 'ejercicioAjaxCU01216F.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
}
function mostrarCiudades (arrayCiudades) {
var nodoMostrarResultados = document.getElementById('listaCiudades');
if (!arrayCiudades) {nodoMostrarResultados.innerHTML = ''; return}
var contenidosAMostrar = '';
for (var i=0; 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>
http://aprendehtml.byethost3.com/Ajax/CU01216F/
Decir que me costó bastante llegar sacar el formato json en una cadena de texto, espero haber acertado.
Saludos.
-
Hola Pedro parece todo correcto y que funciona bien pero no puedo hacer pruebas porque interviene la base de datos
Si no me equivoco la cadena de respuesta que obtienes del servidor es esta:
{"nombreCiudad":["Bogot\u00e1","Medell\u00edn","Cali","Barranquilla","Cartagena","C\u00facuta","Soledad","Ibagu\u00e9"]}
Lo que no veo muy claro (a ver si puedes explicarlo) es esta parte:
var jsonResponse = xmlhttp.responseText.split(">");
var objeto_json = JSON.parse(jsonResponse[1]);
¿Por qué haces el split con >?
¿Y por qué haces el JSON.parse con el índice 1 de jsonResponse?
Saludos
-
Hola Alex.
La respuesta que se obtiene con responseText es:
var jsonResponse = xmlhttp.responseText =
<meta charset="utf-8"/>{"nombreCiudad":["Madrid","Barcelona","Valencia","Sevilla","Zaragoza","Malaga","Murcia"]}
De ahí que realice el split con '>'.
Después de hacer el split, jsonResponse[1] contendrá la linea que comentas.
jsonResponse[1] = {"nombreCiudad":["Madrid","Barcelona","Valencia","Sevilla","Zaragoza","Malaga","Murcia"]}
Si sigues el enlace y activas la consola verás las comprobaciones que dejé.
http://aprendehtml.byethost3.com/Ajax/CU01216F/ejercicioCU01216F.html
Seguramente halla alguna forma mejor de resolverlo, pero es la que se me ocurrió en ese momento. ;D
Saludos y gracias por tu tiempo.
-
Hola sí viendo la consola me ha quedado más claro
El tipo de dato que devuelve responseText es de tipo: string ejercicioCU01216F.html:26:1
var jsonResponse = xmlhttp.responseText; contiene: <meta charset="utf-8"/>
{"nombreCiudad":["Madrid","Barcelona","Valencia","Sevilla","Zaragoza","Malaga","Murcia"]} ejercicioCU01216F.html:27:6
después de realizar el split(">") jsonResponse[1] contiene:
{"nombreCiudad":["Madrid","Barcelona","Valencia","Sevilla","Zaragoza","Malaga","Murcia"]} ejercicioCU01216F.html:30:6
y jsonResponse[0] contiene: <meta charset="utf-8"/
Me da la impresión de que el meterte el <meta charset="utf-8"/> en el json está relacionado con que lo tienes como cabecera en el archivo php, si no lo tuvieras creo que no ocurriría eso. De todas formas esto son detalles, lo importante es que el ejercicio esté bien planteado y que se entienda lo que ocurre, creo que por ese lado está todo explicado.
Saludos
-
Si, tienes razón, lo probé quitando esa parte del inicio del archivo php y ya solo devuelve la cadena con formato json.
Saludos.