« anterior próximo »
Páginas: [1]

Autor Tema: Recuperar datos de ficheros JSON en JavaScipt - Ajax ejemplo POST CU01215F  (Leído 2132 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Recuperar datos de ficheros JSON en JavaScipt - Ajax ejemplo POST CU01215F
« en: 27 de Junio 2016, 17:41 »
Buenas tardes. Os dejo una posible solución del ejercicio de la entrega CU01215F del curso Ajax desde cero.

Citar
EJERCICIO

Modifica el código que hemos usado como ejemplo para realizar la petición de datos con ajax mediante POST en lugar de mediante GET.

Código de ejemplo que se ha usado en la entrega:

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);
    paisesRecibidos = objeto_json.listadoPaises.pais;
 
    for (var i=0; i<paisesRecibidos.length;i++) {
    var nombrePais = objeto_json.listadoPaises.pais[i].nombre;
        if (nombrePais==paisElegido) {
        document.getElementById("txtInformacion").innerHTML = 'El pais recibido por get en segundo plano es '+nombrePais+ ' y tiene indice '+i;
        var ciudadesPais = objeto_json.listadoPaises.pais[i].ciudadImportante;
        mostrarCiudades(ciudadesPais);
        }
    }
   
}
}

xmlhttp.open("GET","listadoPaises.json?nocache=' + (new Date()).getTime()");
xmlhttp.send();
}

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>
Solución del ejercicio:

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);
            paisesRecibidos = objeto_json.listadoPaises.pais;
         
          for(var i=0; i<paisesRecibidos.length;i++){
            var nombrePais = objeto_json.listadoPaises.pais[i].nombre;
            if(nombrePais==paisElegido){
              document.getElementById("txtInformacion").innerHTML = 'El pais recibido por get en segundo plano es '+nombrePais+ ' y tiene indice '+i;
              var ciudadesPais = objeto_json.listadoPaises.pais[i].ciudadImportante;
              mostrarCiudades(ciudadesPais);
            }
          }
        }
      }

      var cadenaParametros = 'pais='+encodeURIComponent(str);
      xmlhttp.open("POST","listadoPaises.json");
      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=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>
Gracias.
« Última modificación: 01 de Julio 2016, 22:25 por Mario R. Rancel »
En línea

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:Recuperar datos de ficheros JSON en JavaScipt - Ajax ejemplo POST CU01215F
« Respuesta #1 en: 01 de Julio 2016, 22:26 »
Buenas noches, todo bien. Saludos.
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".