Autor Tema: Ajax y JavaScript con consulta a base de datos MySql usando PHP ejemplo CU01216F (Leído 6562 veces)

Dimitar Stefanov · « **en:** 27 de Junio 2016, 17:49 »

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:

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.

Código utilizado en la entrega como ejemplo:

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

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

Código: [Seleccionar]

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

Gracias.

Mario R. Rancel · « **Respuesta #1 en:** 01 de Julio 2016, 22:36 »

Buenas noches, felicitarte por la constancia y por ir superando curso tras curso. Por mi parte agradecer también a todos quienes colaboran ayudando y respondiendo en los foros. Esa participación es fundamental para que esto funcione y para que quienes están interesados puedan aprender con la ayuda de personas que antes estuvieron en su misma situación.

Saludos.

Dimitar Stefanov · « **Respuesta #2 en:** 03 de Julio 2016, 13:23 »

Buenas tardes, Mario.

Gracias por corregirme este ejercicio también.

Gracias a vosotros por darnos la oportunidad a nosotros aprender con tan buenas explicaciones y casos prácticos.

Me gusta mucho como habéis estructurada la página y la manera de corregirnos unos a los otros. En un comentario tuyo me comentaste que a parte de aprender de esta manera, corregiendo ejercicios a nuestros compañeros que ya habíamos estudiado es una forma de repasar los temas pasados. Totalmente de acuedo. Así repasamos materia ya estudiada y entendemos detalles que, puede ser, anteriormenete no lo habíamos entendido tan bien.

Sois los mejores! Gracias.

Ahora, a por otro curso más que voy

Saludos.

Mario R. Rancel · « **Respuesta #3 en:** 06 de Julio 2016, 13:49 »

Bueno, gracias a tí también por estar ayudando en los foros. Como comentas al revisar código de otros compañeros además de repasar vas ganando soltura para leer y analizar código con rapidez. También es bueno ver distintos planteamientos y formas de resolver problemas. A veces tendemos a tratar de resolverlo todo de una misma manera, pero hay que valorar cuando una persona lo plantea de otra manera y está bien resuelto, eso nos puede abrir la mente para en cada ocasión tener distintas estrategias donde elegir y usar la más apropiada en cada caso. Un abrazo,

Dimitar Stefanov · « **Respuesta #4 en:** 06 de Julio 2016, 17:23 »

Buenas, Mario.

Totalmente de acuerdo contigo. Desde que estoy revisando códigos de Java he repasado un montón. Y cada vez me siento más y más seguro revisando. También, es cierto, que siempre antes de corregir a algún alumno intento estar 100 % seguro de lo que estoy diciendo.

Otro abrazado.

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

Noticias:

Autor Tema: Ajax y JavaScript con consulta a base de datos MySql usando PHP ejemplo CU01216F (Leído 6562 veces)

Dimitar Stefanov

Ajax y JavaScript con consulta a base de datos MySql usando PHP ejemplo CU01216F

Mario R. Rancel

Re:Ajax y JavaScript con consulta a base de datos MySql usando PHP ejemplo CU01216F

Dimitar Stefanov

Re:Ajax y JavaScript con consulta a base de datos MySql usando PHP ejemplo CU01216F

Mario R. Rancel

Re:Ajax y JavaScript con consulta a base de datos MySql usando PHP ejemplo CU01216F

Dimitar Stefanov

Re:Ajax y JavaScript con consulta a base de datos MySql usando PHP ejemplo CU01216F

Preguntas y respuestas