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.