Кнопка HTML не отображает данные OpenWeather API

Я создал некоторый код, который должен отображать некоторые данные из API openweather после того, как вы введете город и страну. В настоящее время он ничего не делает после нажатия кнопки отправки.

Это мой HTML-файл: Index.html

<head>
    <title>Open Weather API</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="mainWeather.js"></script>
</head>

<body>
    <div id="userArea">
        <div id="stateWrapper">
            <input type="text" id="cityInput" placeholder="Enter a State"/>
        </div>
        <br/>
        <div id="countryWrapper">
             <input type="text" id="countryInput" placeholder="Enter a Country"/>
        </div>
        <br/>
        <div id="buttonArea">
            <input type="submit" id="submitWeather"/>
        </div>
    </div>
    <!- USED TO SHOW RESULT -->
    <div id="weatherWrapper">
    </div>
</body>

In my code I have changed the "Key" to my actual Key

Вот мой файл JavaScript: mainWeather.js

var mainWeather = {
    init: function () {
        $("#submitWeather").click(function () {
            return mainWeather.getWeather();
        });
    },

    getWeather: function () {
        $.get('http://api.openweathermap.org/data/2.5/weather?q=' + $("#cityInput").val() + "," + $("#countryInput").val() + "Key", function (data) {
            var json = {
                json: JSON.stringify(data),
                delay: 1
            };
            echo(json);
        });
    },

    //Prints result from the weatherapi, receiving as param an object
    createWeatherWidg: function (data) {
        return "<div class='pressure'> <p>Temperature: " + (data.main.temp - 273.15).toFixed(2) + " C</p></div>" +
            "<div class='description'> <p>Title: " + data.weather[0].main + "</p></div>" +
            "<div class='description'> <p>Description: " + data.weather[0].description + "</p></div>" +
            "<div class='wind'> <p>Wind Speed: " + data.wind.speed + "</p></div>" +
            "<div class='humidity'> <p>Humidity: " + data.main.humidity + "%</p></div>" +
            "<div class='pressure'> <p>Pressure: " + data.main.pressure + " hpa</p></div>";
    }
};

var echo = function (dataPass) {
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: dataPass,
        cache: false,
        success: function (json) {
            var wrapper = $("#weatherWrapper");
            wrapper.empty();
            wrapper.append("<div class='city'> <p>Place: " + json.name + ", " + json.sys.country + "</p></div>");
            wrapper.append(mainWeather.createWeatherWidg(json));
        }
    });
};

mainWeather.init();

Я не могу понять, почему это не работает, два файла находятся в одной папке.


javascript json html openweathermap ajax
person Luke Rayner    schedule 17.08.2016    source источник
comment
ошибки в консоли? вы сказали, что два файла находятся в одной папке, но в HTML ваш <script type="text/javascript" src="resources/js/mainWeather.js"></script> подразумевает, что он должен находиться в подпапке с именем /resources/js   -  person ADyson    schedule 17.08.2016
comment
О, извините, он у меня был в этой папке, но я переместил его и забыл изменить код, упс! Я изменил код, и он все еще не работает, и в консоли нет ошибок.   -  person Luke Rayner    schedule 17.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

сдача

    $("#submitWeather").click(function () {
        return mainWeather.getWeather();
    });

to

    $("#submitWeather").click(function (event) {
        event.preventDefault();
        return mainWeather.getWeather();
    });

Этот:

event.preventDefault();

остановит отправку страницы обратно. Поскольку "#submitWeather" является вводом типа "submit", он по умолчанию вызывает полную обратную передачу страницы, прежде чем он когда-либо запустит javascript.

Во-вторых, оберните весь mainWeather.js в $(function() { ... }); блокировать. Мне приходит в голову, что обработчик события щелчка настраивается до того, как элемент, который он должен обрабатывать, был отрендерен. Блок заставит код ждать, пока весь документ не будет готов.

person ADyson    schedule 17.08.2016
comment
Я добавил код, и он все еще не работает, он не отображает данные после нажатия кнопки - person Luke Rayner; 17.08.2016
comment
попробуйте обернуть весь mainWeather.js в $(function() { ... }); блокировать. Мне приходит в голову, что обработчик события щелчка настраивается до того, как элемент, который он должен обрабатывать, был отрендерен. Блок заставит код ждать, пока весь документ не будет готов - person ADyson; 17.08.2016
comment
какие-либо ошибки на вкладке консоли / сети на этот раз? Я заметил, что вы не обрабатываете функцию ошибки вашего вызова ajax. Таким образом, все, что пойдет не так при вызове API, будет просто проглочено с точки зрения вашего приложения. Вы можете увидеть это в консоли. По крайней мере, добавьте несколько вызовов console.log() в свой код в разных местах, чтобы увидеть, затрагиваются ли разные части или нет. - person ADyson; 17.08.2016
comment
После нажатия кнопки я получаю эту ошибку -------- XMLHttpRequest не может загрузить файл:///C:/echo/json/. Запросы между источниками поддерживаются только для схем протоколов: http, data, chrome, chrome-extension, https, chrome-extension-resource. -------- - person Luke Rayner; 17.08.2016
comment
ok 1. Я думаю, вам, вероятно, следует удалить первую косую черту из /echo/json (так что echo/json). 2. Похоже, вы просто обращаетесь к файлу HTML напрямую, используя file://Index.html в своем браузере? Чтобы локальный вызов ajax работал, вам необходимо правильно разместить его на веб-сервере (может быть localhost) и получить к нему доступ таким образом. - person ADyson; 17.08.2016
comment
О, это имело бы смысл, извините, я не понял, что должен был это сделать, как я могу запустить его через локальный хост? - person Luke Rayner; 17.08.2016
comment
зависит от вашей ОС. IIS — это нормально для Windows, Apache — довольно стандартно для Linux/OSX. Если ваша версия Windows не позволяет использовать IIS, есть несколько других небольших веб-серверов, которые вы могли бы использовать — просто погуглите. В Интернете есть множество документов о том, как включить их и разместить в них свои страницы. - person ADyson; 17.08.2016
comment
хорошо, спасибо, мне придется подождать, пока я не вернусь домой, потому что у меня есть настройка raspberry pi со стеком LAMP - person Luke Rayner; 17.08.2016
comment
да так бы и получилось. в любом случае звучит так, будто ваша первоначальная проблема решена (не запуская щелчок или не вызывая данные - если вы получили функцию эха, то данные openweather должны быть загружены). Так что, если это помогло, пожалуйста, проголосуйте и/или отметьте как принятое. Благодарность :-) - person ADyson; 17.08.2016