данные погоды openweathermap по почтовому индексу не работают? - PullRequest
0 голосов
/ 09 ноября 2018

Мне нужно сделать так, чтобы при вводе почтового индекса в поле и нажатии кнопки отправки под ним отображалось название города. когда я нажимаю кнопку после ввода почтового индекса, название города не отображается. он говорит, что ошибка в том, что wallOfText не является функцией, но я не уверен, как это исправить. любая помощь будет оценена !! вот код:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
Enter your zip code:<br><input type="text" id="zipBox" name="zipCode"><br><br>
<button onclick="weatherFunction()">Submit</button>
<p id="result"></p>
<script>
    function weatherFunction() {
        var zip = document.getElementById("zipBox").value;
        jQuery(document).ready(function ($) {
            $.ajax({
                url: "http://api.openweathermap.org/data/2.5/weather?zip=" +zip+ ",us&appid=b3456f9acbfa64fc4495e6696ecdc9a5",
                dataType: "jsonp",
                success: function (wallOfText) {
                    city = wallOfText("name");
                    if (zip != null) {
                        document.getElementById("result").innerHTML = wallOfText;

                    }
                }
            });
        });
    }
</script>
</body>
</html>

1 Ответ

0 голосов
/ 09 ноября 2018

Проблема, с которой вы столкнулись, заключается в том, что вы пытаетесь вызвать wallOfText, как будто это функция, тогда как на самом деле это объект, который был десериализован из ответа на вызов AJAX. Таким образом, вам нужно получить доступ к свойству name объекта, чтобы установить переменную city, а затем использовать его для установки text() элемента #result.

Обратите внимание, что обработчик document.ready в функции является избыточным, и вы должны выполнить проверку zip значения до того, как вы сделаете запрос. Я также обновил логику, чтобы использовать jQuery для привязки обработчика событий к кнопке вместо устаревшего атрибута onclick. Попробуйте это:

jQuery(function() {
  $('#send').click(function() {
    var zip = $("#zipBox").val();
    if (zip !== '') {
      $.ajax({
        url: "http://api.openweathermap.org/data/2.5/weather?zip=" + zip + ",us&appid=b3456f9acbfa64fc4495e6696ecdc9a5",
        dataType: "jsonp",
        success: function(wallOfText) {
          var city = wallOfText.name;
          $("#result").text(city);
        }
      });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Enter your zip code:<br>
<input type="text" id="zipBox" name="zipCode" value="90210" /><br /><br /> 
<button type="button" id="send">Submit</button>
<p id="result"></p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...