Question

我使用this tutorial来消费气象服务。有用;但是，它返回console.log中的数据，因为我不知道如何将其写入页面。

这是我的代码

<script>
    function getWeatherFunction() {
        var my_city = $('#zip').valueOf;
        if (my_city == null) {
            alert('Put in a zip code')
        }
        var my_key = "772bc01c638bb23d13e33940a8454";
        var no_of_days = 2;


        $.ajax({
            type: 'GET',
            crossDomain: 'true',
            url: "http://api.worldweatheronline.com/free/v2/weather.ashx?q=" + my_city + "&key=" + my_key + "&format=json&no_of_days=" + no_of_days + "&includeLocation=yes",
            success: function (data) {
                console.log("Here is the data", data);
                alert("Here is the data" + data.toSource());
            },
            error: function () {
                alert("Error loading data");
            }
        });
    }
</script>

这给出了这样的输出 JSON Output

如何将此数据写入页面？或者我如何提取这些数据的特定部分？

Answer 1

W3Schools有一个非常好的入门，介绍了如何在javascript中使用JSON数据，可以找到here

它的主旨是你有一个你需要访问的对象，然后对你的数据做一些事情，把它放在页面上。

一种非常简单的方法是在页面上创建一个具有特定ID的div，如下所示：

<div id="weatherInformationDiv">
</div>

然后使用jquery的html函数将其直接注入div（jquery html函数here上的引用），并使用函数，如下所示：

 $.ajax({
            type: 'GET',
            crossDomain: 'true',
            url: "http://api.worldweatheronline.com/free/v2/weather.ashx?q=" + my_city + "&key=" + my_key + "&format=json&no_of_days=" + no_of_days + "&includeLocation=yes",
            success: function (data) {
                //console.log("Here is the data", data);
                $('#weatherInformationDiv').html(data);
                alert("Here is the data" + data.toSource());
            },
            error: function () {
                alert("Error loading data");
            }
        });

这会将原始返回的JSON数据转储到您网页上的div中，并希望能让您入门。

使用jQuery将JSON请求中的数据放入页面

1 个答案: