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

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

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

Answer 2

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

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

Weather Website With Ajax Using Open Weather Map API Not Returning Data

html

javascript

ajax

weather

openweathermap