如何使用天气 API 创建我的天气 HTML 页面 [关闭]

Question

我想用 HTML 和 CSS 编写一个页面。 我已经设计了它，但是我迷路了，因为我不知道如何将它与天气 API 链接以获取所选城市/国家的天气。 谁能给我举例说明代码是如何运行的？

Answer 1

您必须查看 API 文档，该文档应该会告诉您如何从服务中请求数据。如果没有指向它的链接，我们将无法帮助您。

This 应该让您大致了解如何在 PHP 中使用 JSON 和 API，但如果您正在寻找一种简单的拉动机制来更新页面上的天气，则不需要那么重的东西：它不需要是服务器端的。

我建议在这个上使用 JavaScript，它会是这样的：

var req = new XMLHttpRequest();
var url = "yourURL"; //it is important that you read the API docs for this, because some APIs require you to use your API key in your request

req.open('GET', url, true);
req.onload = function (e) {
    if (req.readyState == 4 && req.status == 200) {
        if (req.status == 200) {
            var response = JSON.parse(req.responseText); //response is now an object containing all of the data that the API gives you; again, you'll have to look at the API docs to see how that information is formatted
            //update your page here using response data
            }
        }
    }
};
req.send(null);

我还建议填写How to use APIs with JavaScript。

无论哪种方式，您都会得到一个 JSON 对象作为回报，其格式如下：

var response = [
    {
        "name": "Australia",
        "website": "http://www.footballaustralia.com.au",
        "foundedYear": 1961,
        "address": "Locked Bag A 4071\nNSW 1235\nSydney",
        "homeStadium": "ANZ Stadium",
        "stadiumCapacity": 83500,
        "group": "B",
        "groupRank": 3,
        "groupPoints": 0,
        "matchesPlayed": 1,
        "wins": 0,
        "losses": 1,
        "draws": 0,
        "goalsFor": 1,
        "goalsAgainst": 3,
        "goalsDiff": "-2",
        "id": "16EF7687-2D69-473C-BFE7-B781D67752DC",
        "type": "Team"
    }, 
    {
        "name": "England",
        "website": "http://www.thefa.com",
        "foundedYear": 1863,
        "address": "PO Box 1966\nSW1P 9EQ\nLondon",
        "homeStadium": "Wembley Stadium",
        "stadiumCapacity": 90000,
        "group": "D",
        "groupRank": 3,
        "groupPoints": 0,
        "matchesPlayed": 1,
        "wins": 0,
        "losses": 1,
        "draws": 0,
        "goalsFor": 1,
        "goalsAgainst": 2,
        "goalsDiff": "-1",
        "id": "2EFCFEB2-EBF8-4628-B659-B00C49D93811",
        "type": "Team"
    },
    {
        "name": "Ghana",
        "website": "http://www.ghanafa.org",
        "foundedYear": 1957,
        "address": "South East Ridge\n19338\nAccra",
        "homeStadium": "Ohene Djan Sports Stadium",
        "stadiumCapacity": 35000,
        "group": "G",
        "groupRank": 2,
        "groupPoints": 0,
        "matchesPlayed": 0,
        "wins": 0,
        "losses": 0,
        "draws": 0,
        "goalsFor": 0,
        "goalsAgainst": 0,
        "goalsDiff": "+0",
        "id": "CCC66F75-7004-46E4-BB31-259B06A42516",
        "type": "Team"
    }
];

因此，例如，您可以使用

访问澳大利亚的网站

response[0].website;

您也可以使用纯 XML，但 JSON 是最流行的 API 请求方式。