1

necesito utilizar el método get con javascript puro o con jquery para poder sacar la informacion no me importa si saca el cuerpo completo de la pagina o solo los datos JSON, intente de varias formas y nunca me funciona casi siempre me sale el "error no 'access-control-allow-origin' header is present on the requested resource".

También intente hacerlo con una pagina desde localhost y tampoco me sirvió, sin mas que añadir espero que alguien me pueda ayuda.

Esta es la pagina la que deseo acceder, http://www.waldou.com/personas.json.

Codigo html

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>List of elements</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	</head>
	
	<body>
		<div id="container">
			<div>
				<img src="img/shadow-profile-people-header.jpg" />
			</div>
			
		</div>
		<script src = "js/main.js"></script>
		
	</body>
</html>

5
  • 1
    Deberias incluir lo que has intentado en javascript.
    – alanfcm
    Commented el 9 ago. 2018 a las 18:19
  • Si mas no me equivoco, me sucedió una vez cuando trate de acceder un fichero en la maquina local y en lo que busque en internet era que los navegadores bloquean por seguridad peticiones de ese tipo de request desde sitios externo o a la maquina local. Commented el 9 ago. 2018 a las 18:33
  • Puse un ejemplo usando un string, ahora falta que uses la misma lógica con la url. Commented el 9 ago. 2018 a las 18:56
  • también podes ver es.stackoverflow.com/a/153571/81450 Commented el 9 ago. 2018 a las 19:53
  • Aqui esta la respuesta en parte, enlace por lo menos ya no me sale el error.
    – dougblizz
    Commented el 9 ago. 2018 a las 20:22

2 respuestas 2

1

En el main.js puse esto:

var obj = JSON.parse('[{"title":"Duglimar Ocando","content":"Arquitecta de 24 años, mujer preciosa que hace lindas casas y rica comida, pero con un instinto asesino por dentro.","photo":"https://www.mipleo.cl/src/users/20180306/6f05c3b3bbdc798b5eb39b9bdb4242780.jpg"},{"title":"Waldo Urribarri","content":"Ingeniero de 30 añ super apuesto y amigable.","photo":"https://avatars2.githubusercontent.com/u/3824104?v=4"},{"title":"Douglas Ocando","content":"Estudiante de ingeniería en informática, aprendiendo a programar como los pros.","photo": "https://scontent.fscl1-1.fna.fbcdn.net/v/t1.0-9/10398462_1131206958953_7974744_n.jpg?_nc_cat=0&oh=42b723ef5035f15cb69b38fbed516a09&oe=5B506B73"},{"title":"Yenny Gil","content":"Enfermera. Dicen que viene a hacerle empanadas a Duglimar. Ver para creer.","photo":"https://scontent.fscl1-1.fna.fbcdn.net/v/t1.0-9/12347852_10207393282248849_2542999839803620587_n.jpg?_nc_cat=0&oh=82f9c83ece84821899593e764f3d4b94&oe=5B8F54ED"}]');
if(obj!=null){
    console.log(obj[0]["title"]);
    for(o in obj){
        console.log(o+' >> '+obj[o].title+'  >> '+ obj[o].content+'  >> '+obj[o].photo);
    }
}

En tu página html puede usar esto:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Lista de elementos</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>

    <body>
        <div id="container"></div>

        <script src = "js/main.js"></script>
        <script type="text/javascript">
            for(var i=0 ; i < obj.length; i++){
                document.getElementById("container").innerHTML += "<p>title:"+obj[i].title+"</p><br/><p>content:"
                +obj[i].content+"</p><br/><img src="+obj[i].photo+"></>";
            }
        </script>


    </body>
</html>

Salida: introducir la descripción de la imagen aquí

3
0

Esta es la petición usando fetch de javascript

function getDatos() {
    let url = 'http://www.waldou.com/personas.json';
    return fetch(url)
        .then(function (response) {
            response.json();
        });
}

getDatos().then(function(data){
  //Procesar los datos
  let resData = data; //aqui la variable debe de tener esto:[{"title":"Duglimar Ocando","content":"...", "photo":"..." },{"title":"Waldo Urribarri","content":"...", "photo":"..." }]
  
  let _container = document.getElementById("container");
  
  for(var itemData of resData){
     _container.innerHTML += `<p>title:${itemData.title}</p><br/><p>content:${itemData.content}</p><br/><img src=${itemData.photo}></>`;
  }
  
});

Sin embargo hay un problema con la petición ya que el servidor no esta configurado para recibir peticiones de otro origen.

Se tiene que habilitar el CORS para que se pueda procesar la petición. Puedes encontrar mas del tema aquí:

https://developer.mozilla.org/es/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

2
  • Ya resolví el error, solo hay que agregarle una "s" al htttp osea seria htttps. pero como podria obtener los datos de la pagina ? Siempre me sale error con el get, lo que quiero obtener es lo que esta en el <pre>
    – dougblizz
    Commented el 9 ago. 2018 a las 21:39
  • Modifique la respuesta, checa si es lo que necesitas. Saludos! Commented el 9 ago. 2018 a las 22:04

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.