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