Question

我创建了一些代码，在您输入城市和国家/地区后，应该显示openweather API中的一些数据。单击提交按钮后，它目前无效。

这是我的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>

在我的代码中，我更改了＆＃34; Key＆＃34;到我的实际密钥

这是我的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();

我似乎无法弄清楚它为什么不起作用，这两个文件在同一个文件夹中。

Answer 1

变化

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

到

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

此：

event.preventDefault();

将阻止页面回发。自＆＃34;＃submitWeather＆＃34;是＆＃34;提交＆＃34;的输入，它在默认运行javascript之前会导致整页回发。

其次，将整个mainWeather.js包装在$（function（）{...}）中;块。在我看来，click事件处理程序是在它应该处理的元素被渲染之前设置的。该块将使代码等待，直到整个文档准备就绪。

HTML按钮不显示OpenWeather API数据

1 个答案: