Ejemplo de clase codepen ajax jquery

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

Post Reply
User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Ejemplo de clase codepen ajax jquery

Post by xacarana » Wed Apr 20, 2016 9:52 am

En el siguiente enlace se encuentra el ejemplo realizado sobre peticiones en ajax, no funciona en codepen por un tema de seguridad, pero se puede descargar y probar en el computador, a continuación los codigos.

HTML

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="js/main.js"></script>
</head>
<body>
	<div id="resultado"></div>
</body>
</html>
JS

Code: Select all

//https://randomuser.me/
var resultado;
window.onload = function(){
  resultado = $("#resultado");
  leerDatos();
}

function leerDatos(){
  $.ajax({
    url: 'http://api.randomuser.me/?results=3',
    dataType: 'json',
    success: function(data){
      console.log("Exito!");
      pintarDatos(data);
    },
    error: function(data){
      Console.log("Error!");
      //console.dir(data);
    }
  });
  
}

function pintarDatos(data){
  console.log(data.results[0].name.first);
  //console.dir(data);
  //console.log(datos.name.first +" " + datos.name.last);
  //console.log(datos.picture.medium);
  var datos = data.results;
  var temp;
  var ans = "";
  for(var i in datos)
  {
    temp = datos[i];
    ans+= "<img class='img-circle' src='"+temp.picture.medium+"' />";
    ans+= "<p>";
    ans+= temp.name.first+" "+temp.name.last;
    ans+= "</p>";
  }

  resultado.html(ans);
}
https://codepen.io/xaca/pen/reGvGw
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

Post Reply