如何使用天气API来创建我的天气HTML页面


How to use weather API to create my weather HTML page

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

您必须查看API文档,它应该告诉您如何从服务请求数据。如果没有链接,我们无法帮助你。

这应该会让你对如何在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);

我还推荐完成《如何使用JavaScript api》。

无论哪种方式,您都将返回一个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请求最流行的方式。