Autor Tema: Ajax. Consulta a base de datos MySql PHP recuperar datos formato JSON CU01216F (Leído 4486 veces)

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.

Citar

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

Código: [Seleccionar]

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

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

Alex Rodríguez · « **Respuesta #1 en:** 29 de Marzo 2016, 14:51 »

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

pedro,, · « **Respuesta #2 en:** 29 de Marzo 2016, 22:58 »

Hola Alex.

La respuesta que se obtiene con responseText es:

Código: [Seleccionar]

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.

Código: [Seleccionar]

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.

Saludos y gracias por tu tiempo.

Alex Rodríguez · « **Respuesta #3 en:** 31 de Marzo 2016, 14:47 »

Hola sí viendo la consola me ha quedado más claro

Citar

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

pedro,, · « **Respuesta #4 en:** 31 de Marzo 2016, 22:19 »

Si, tienes razón, lo probé quitando esa parte del inicio del archivo php y ya solo devuelve la cadena con formato json.

Saludos.

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

Noticias:

Autor Tema: Ajax. Consulta a base de datos MySql PHP recuperar datos formato JSON CU01216F (Leído 4486 veces)

pedro,,

Ajax. Consulta a base de datos MySql PHP recuperar datos formato JSON CU01216F

Alex Rodríguez

Re:Ajax. Consulta a base de datos y recuperar datos en formato JSON. CU01216F

pedro,,

Re:Ajax. Consulta a base de datos y recuperar datos en formato JSON. CU01216F

Alex Rodríguez

Re:Ajax. Consulta a base de datos MySql PHP recuperar datos formato JSON CU01216F

pedro,,

Re:Ajax. Consulta a base de datos MySql PHP recuperar datos formato JSON CU01216F

Preguntas y respuestas