Question

我想建立一个网站，如果我输入城市名称，我可以看到温度。这是我的代码但由于某种原因它无法正常工作！请帮忙！

首先，我将展示JavaScript代码，然后我将展示HTML代码。

$(document).ready(function(){
    $('#submitWeather').click(function(){
        var city = $("#city").val();
        if (city != ''){
            $.ajax({
                url: 'https://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=xxx",
                type: "GET",
                dataType: "jsonp",
                success: function(data){
                    var widget = show(data);
                    $("#show").html(widget);
                    $("#city").val('');
                }
            });
        }else{
            $("#error").html('Field cannot be empty');
        }
    });
});
function show(data) {
    return "<h3><strong>Weather</strong>: "+ data.main[0].temp +"</h3>"
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<div class="row">
    <h3 class="text-center text-primary">Enter City Name</h3>
    <span id="error"></span>
</div>
<div class="row form-group form-inline" id="rowDiv">
    <input type="text" name="city" class="form-control" placeholder="City Name">
    <button id="submitWeather" class="btn btn-primary">Search City</button>
</div>
<div id="show"></div>

有谁知道我做错了什么？请告诉我！我使用此视频创建了网站：https://www.youtube.com/watch?v=6imiFFeDIzE

Answer 1

在您的show函数中，它会尝试获取data.main[0].temp。 Open Weather Map API没有将主字段指定为数组，它只是一个对象。因此，删除[0]部分，因为它不是数组而只是一个对象您还将密钥放入代码中，因此您可能需要重置密钥此外，您尝试选择名称为city的输入框，但实际上您正在选择ID为city的输入框，该输入框不存在。在input元素上添加名为id的属性，其值为city。

Answer 2

除了删除[0]之外，您还需要为输入分配id='city'。您正在使用未定义的jquery $("#city").val()。我在codepen中运行测试并使其正常工作。 check it out on codepen

天气网站使用Ajax使用开放天气地图API不返回数据

2 个答案: