API с открытой погодой

Question

Итак, я создаю кучу веб-страниц для разных сообществ, и на каждом из них я хочу иметь небольшой погодный ящик, который я могу настроить, только с названием города, текущей температурой и текущее состояние погоды. Я хочу, чтобы все было в порядке, как я хочу. Я нашел этот сайт под названием Open Weather Map, который, похоже, делает именно то, что я хочу. Проблема в том, что я не знаю, как использовать JSON. Это, вероятно, легко, но я, похоже, потерялся в любых онлайн-учебниках, которые я пробовал.

Это пример URL-адреса страницы, загружающей JSON. http://api.openweathermap.org/data/2.5/weather?q=London,uk

Я мог бы просто включить это в свой файл и динамически изменить город и код страны, чтобы получить город, который я хочу. Но как я могу загрузить это в поле погоды? Скажем, это то, что у меня есть:

<div class="weatherbox"> 

    <strong class="city>{CITY NAME HERE}</strong> 
    <span class="temperature">{X} °C</span> 
    <p class="weatherdescription>{WEATHER DESCRIPTION HERE}</p> 

</div> 

Тогда как получить доступ к данным от JSON? Я хочу, чтобы это было сделано как можно проще. Включить ли я файл, подобный этому, для доступа к объекту, или это сложнее?

<script type="javascript" src="http://api.openweathermap.org/data/2.5/weather?q=London,uk"></script> 

Answer 1

из вашей строки кода:

<script type="javascript" src="http://api.openweathermap.org/data/2.5/weather?q=London,uk"></script> 

это неправильно, апи возвращает JSON, это не является Java-файл, так что вы не доступ к ней таким образом. Обратите внимание, что их API, как представляется, отображает город и страну как часть параметров URL, поэтому вам нужно подключиться к соответствующему городу/стране.

Для вашего конкретного вопроса вы могли бы сделать что-то вроде:

var jsonData; 

$(document).ready(function() 
{ 
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?q=London,uk', function(data) { 
     jsonData = data; 
     $('.city').text(jsonData.name); 
     // etc 
    }); 
}); 

Смотрите http://jsfiddle.net/jsxm7j3n/1/ для него в действии.

Обратите внимание, что для понимания JSON вы можете запускать его через парсер JSON, такой как номер http://json.parser.online.fr/ - это позволит вам лучше понять, что вы получаете, и как его разобрать ,

Двойное примечание: забыл упомянуть, что это решение использует JQuery - я считаю, что есть чисто javascript способы его вытащить, но это будет гораздо более подробным и (на мой взгляд) сложнее понять.

Answer 2

Предполагая JQuery:

<script> 
// Load the data through ajax, not by including it like a script: 

$.get('http://api.openweathermap.org/data/2.5/weather?q=London,uk', function(data) { 
    $('.weatherbox .temperature').text(data.main.temp); 
}); 

</script> 

Когда вы смотрите на заголовки ответа от URL в API, он посылает 2 важных заголовков:

Content-Type: application/json; charset=utf-8 
Access-Control-Allow-Origin: * 

Это означает:

1. Обратный объект JSON, а не только файл. Вам не нужно использовать JSON.parse() или $.getJSON.
2. Разрешите любому запрашивать его через ajax (аспект безопасности Ajax).

Поскольку Ajax по умолчанию является асинхронным (это то, что означает A), вам необходимо привязать ваше назначение к функции, которая выполняется после завершения запроса.