<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test consumir WebService</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
// Procesar resultados del webservice
function webServiceResult(data)
{
$("#resultado_json").empty();
$("#resultado_json").append("Nombre: "+data.name+"<br>");
$("#resultado_json").append("Pais: "+data.sys.country+"<br>");
$("#resultado_json").append("Longitud: "+data.coord.lon+"<br>");
$("#resultado_json").append("Latitud: "+data.coord.lat+"<br>");
$("#resultado_json").append("Tiempo: "+data.weather[0].main+"<br>");
$("#resultado_json").append(" "+data.weather[0].description+"<br>");
$("#resultado_json").append("Humedad: "+data.main.humidity+"<br>");
var tmin = Math.round(10*(data.main.temp_min -273.15)) / 10;
var tmax = Math.round(10*(data.main.temp_max -273.15)) / 10 ;
$("#resultado_json").append("Temp. minima: "+tmin+"<br>");
$("#resultado_json").append("Temp. maxima: "+tmax+"<br>");
}
// Llamada al webservice
function callWebService()
{
try
{
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather",
data:
{
q: "Cordoba,es",
},
type: "get",
async: true,
contentType: "text/json; charset=utf-8",
dataType: "jsonp",
success: function(msg) { webServiceResult(msg) },
error: function(jqXmlHttpRequest, textStatus, errorThrown) { alert("Error leyendo datos."); }
});
}
catch (err)
{
alert(err);
}
}
</script>
</head>
<body>
<button type="button" onclick="javascript:callWebService();">Llamar a WS</button>
<div id="resultado_json"></div>
</body>
</html>
Un ejemplo más elaborado, e incluso cargando los datos a consultar desde un fichero JSON, se puede consultar aqui.
Entradas
Muchas gracias. Este código me ha sido de gran utilidad. ¡Saludos!
ResponderEliminarBuenos días dice error leyendo datos, alguien me puede ayudar?
ResponderEliminarHola!
EliminarYo resolví el problema poniendo "json" en dataType en vez de "jsonp".
Saludos!
$("#resultado_json").append("Nombre: "+data.name+"
ResponderEliminar");
$("#resultado_json").append("Pais: "+data.sys.country+"
");
$("#resultado_json").append("Longitud: "+data.coord.lon+"
");
$("#resultado_json").append("Latitud: "+data.coord.lat+"
");
$("#resultado_json").append("Tiempo: "+data.weather[0].main+"
");
$("#resultado_json").append(" "+data.weather[0].description+"
");
$("#resultado_json").append("Humedad: "+data.main.humidity+"
");
var tmin = Math.round(10*(data.main.temp_min -273.15)) / 10;
var tmax = Math.round(10*(data.main.temp_max -273.15)) / 10 ;
$("#resultado_json").append("Temp. minima: "+tmin+"
");
$("#resultado_json").append("Temp. maxima: "+tmax+"
");
}
en esta sección que va después del nombre, país, longitud etc. son los campos de la base de datos o los datos que voy a pedir
que significa lo que esta dentro de data!?
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarya corregi lo de dataType
ResponderEliminarAccess to XMLHttpRequest at 'http://api.openweathermap.org/data/2.5/weather?q=Cordoba%2Ces' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
jquery.min.js:4 GET http://api.openweathermap.org/data/2.5/weather?q=Cordoba%2Ces net::ERR_FAILED