Использование API publi c для извлечения данных JSON с сайта и асинхронного отображения их на странице - PullRequest
0 голосов
/ 07 апреля 2020

<!DOCTYPE html>
<html>
<head>
<script>
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<input type="text" placeholder="Enter Your Zip Code" id="zipCode">
<button>Get Weather Condition</button>
<table id="description" >
    <tr>
        <td>City:</td>
        <td id="city"></td>
    </tr>
    <tr>
        <td>Temparature:</td>
        <td id="temparature"></td>
    </tr>
    <tr>
        <td>Speed:</td>
        <td id="speed"></td>
    </tr>
    <tr>
        <td>Humidity:</td>
        <td id="humidity"></td>
    </tr>
    <tr>
        <td>Min Temparature:</td>
        <td id="mintemparature"></td>
    </tr>
    <tr>
        <td>Max Temparature:</td>
        <td id="maxtemparature"></td>
    </tr>
</table>
<script>
    function convertTemp(val){
        var temp = (((val-273.15)*9)/5)+32;
        return temp;
    }
$(document).ready(function(){

$("button").click(function(){
    var zipcode = $("#zipCode").val();
    $.ajax({
       method: "GET",
       url: "http://api.openweathermap.org/data/2.5/weather?zip=" + zipcode 
            + ",us&appid=b6f0657aa7b18c98e70c7bee5d36f1df",
       dataType: "json"
    }).done(function(result) {
        var response = JSON.parse(result);
        $('#city').text(response.name);
        $('#temparature').text(convertTemp(response.main.temp));
        $('#speed').text(response.wind.speed);
        $('#humidity').text(response.main.humidity);
        $('#mintemparature').text(convertTemp(response.main.temp_min));
        $('#maxtemparature').text(convertTemp(response.main.temp_max));
    });
 });
});
</script>
</body>
</html>

Я создаю веб-страницу APL о погоде, но почему при вводе почтового индекса она не дает никаких результатов? Пожалуйста, помогите!

Введите почтовый индекс и используйте этот почтовый индекс для создания URL-адреса, который будет отображать текущую погоду для этой области. Затем на той же странице отобразить погоду. Вы должны отобразить: Текущее состояние (облачно, дождь, переменная облачность, и т. Д. c.) Название города Температура Скорость ветра и направление Влажность Температура Мин. И Макс. Убедитесь, что температура указана в единицах Фаренгейта США.

1 Ответ

1 голос
/ 07 апреля 2020

Несколько вещей, которые нужно исправить:

  • В своем теге <script> вы добавили дополнительный >. Вы можете изменить его на
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
  • Когда вы вызываете свой API, используйте https вместо http
  • Вам не нужно делать var response = JSON.parse(result); , так как установка dataType: "json" уже анализирует его для вас. Поэтому попытка вызвать JSON.parse для объекта приводит к ошибке. Вместо этого просто используйте result.name et c напрямую.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...