2017-02-22 15 views
0

В настоящее время я пытаюсь получить данные изOpenWeatherMap апи не отвечает

openweathermap.org 

по City ID. Но я ничего не могу получить. Я думаю, что, возможно, я сделал что-то неправильно, потому что я просто начинающий и впервые пытаюсь аяк.

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Your Weather</title> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href=""> 
    </head> 
    <body> 
     <div> 
     <h1>The Weather</h1> 
      <div> 
       <p> 
        <span id="show-weather"></span> 
       </p> 
      </div> 
     </div> 
     <script src="jquery-3.1.1.js"></script> 
     <script src="custom.js"></script> 
    </body> 
</html> 

JS:

$(document).ready(function(){ 

    function getCurrentWeather() { 
     $.ajax({ 
      url: 'http://samples.openweathermap.org/data/2.5/weather/' , 
      jsonp: 'jsonp', 
      data: { 
       id: '2172797', 
       appid: 'b1b15e88fa797225412429c1c50c122a1' 
      }, 
      type: "GET", 
      dataType: "jsonp" 

     }) 
     $done(function(json) { 
      $('#show-weather').text(json.coord.lon); 
     }) 
    } 
}); 
+0

Параметр 'appid' не является действительной строкой, попробуйте окружая его в кавычки. – robertklep

+0

Какие ошибки вы получаете в инструментах разработчика браузера? – j08691

+0

@robertklep: 'appid' действителен. [Здесь] (http://stackoverflow.com/a/42396151/6381711), является решением вышеописанной задачи. – nyedidikeke

ответ

2

Использование JSONP по-моему - это взломать.

Используя комплексный подход ниже, вы можете легко потреблять Open Weather Map API:

$(document).ready(function() { 
 
    $.ajax({ 
 
     type: 'GET', 
 
     data: { 
 
      id: '2172797', 
 
      appid: 'b1b15e88fa797225412429c1c50c122a1' 
 
     }, 
 
     url: 'https://samples.openweathermap.org/data/2.5/weather/', 
 
     xhrFields: { 
 
      withCredentials: false 
 
     }, 
 
     headers: {}, 
 
     success: function(data) { 
 
      console.log('success'); 
 
      console.log(data); 
 
     }, 
 
     error: function(data) { 
 
      console.log('error'); 
 
      console.log(data); 
 
     }, 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

+0

Спасибо человеку! Сейчас он работает. Не могли бы вы объяснить вкратце? –

+0

@PrateekGogia: Прежде всего, у вас был '$ done', который не является определенной функцией и заставит вас запускать ошибку' Uncaught ReferenceError: $ done is not defined'. Вам лучше использовать '.done'. Во-вторых, ваш 'jsonp: 'jsonp',' будет запускаться с обратным вызовом, заставляя вас запускать «Uncaught SyntaxError: Неожиданный токен:'. Короче говоря, ваш код должен работать с '.done' вместо' $ done' и без 'jsonp: 'jsonp','. Обратите внимание, что 'dataType:" jsonp "в вашем коде не имеет отношения к этому экземпляру и может быть просто удалено. – nyedidikeke

+0

Хорошо! Спасибо чувак! @nyedidikeke –

-1

Ключевое слово вы ищете 'асинхронное программирование': jQuery.ajax() функция завершает выполнение, прежде чем ответ от сервера приходит , Поэтому вы должны заранее сообщить функции, что должно произойти в этот более поздний момент времени.

Объект свойств, который вы укажете в качестве параметра, имеет специальный ключ для этого: success. Его значение должно быть функцией для выполнения, когда сервер ответил.

$(document).ready(function(){ 

    function getCurrentWeather() { 
     $.ajax({ 
      url: 'http://samples.openweathermap.org/data/2.5/weather/' , 
      jsonp: 'jsonp', 
      data: { 
       id: '2172797', 
       appid: 'b1b15e88fa797225412429c1c50c122a1' 
      }, 
      type: "GET", 
      dataType: "jsonp", 
     }).done(function(json) { 
      $('#show-weather').text(json.coord.lon); 
     }; 
    } 
}); 
+0

Я просто пробовал этот код тоже. Как факт, я уже знал это, и я тоже это пробовал. Но я все еще не могу получить какой-либо результат. –

+0

О, вы используете jQuery 3. 'success' был удален в пользу шаблона Promise. Вы были почти там: '.done()' вместо '$ done'. Код обновлен. – ccprog