调用API获取天气数据

发布时间 2023-10-06 12:39:22作者: 一只特立独行的鸭嘴兽

在学习SpringMVC过程中,我了解到Restful API的调用只需要请求符合规范就能很轻松的实现功能,可以很好地引起我们的学习兴趣,这里我也自己尝试使用了AJAX,jQuery来向API发送请求,并接收JSON数据。

一、找到API提供商

这里我使用的是https://www.apispace.com/,提供的各类API非常齐全,文档格式也简单明了,这里我就用最简单的GET类型接口为例分享一下我的尝试。

该网站的各个API都有200次的免费使用次数,非常适合新手练习。
image

二、阅读API文档

文档中包含了对请求头,参数的规定,只要按照文档中要求的格式发送请求就能得到想要的数据
image

比如这个API就可以按照城市ID或经纬度来查询天气。

但是我们并不清楚对应的城市ID,这一点也包含在API文档中,只要查询即可。

image

比如这个表格中就有成都和成都下辖各区县的信息
image

三、发送请求

那么明确了请求格式之后我们就要发送请求了

以下是示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询</title>
    <script src="../js/jquery.js"></script>
</head>

<body>
    <fieldset>
        <legend>天气情况</legend>
        <input type="button" id="search" value="查询天气"/>
    </fieldset>
    <span id="content"></span>
    <script>
        $(function () {////绑定onload事件(页面加载完成后调用)
            //绑定注册按钮点击事件 
            $("#search").click(function () {
                var data = {

                }
                $.ajax({
                    "url": "https://eolink.o.apispace.com/456456/weather/v001/now?areacode=101210409",  //url地址
                    "method": "GET",                                                                    //请求类型
                    "headers": {                                                                        //请求头
                        "X-APISpace-Token": "个人Token",                         //个人Token
                        "Authorization-Type": "apikey"                                                  //验证方式
                    },
                    "data": data,
                    "crossDomain": true
                })
                    .done(function (response) {                                                         //成功回调函数
                        var content = $("#content")                                                     //获取显示控件
                        content.append(JSON.stringify(response))                                        //JSON结果转成字符串,添加至显示控件
                    })
                    .fail(function (jqXHR) { }                                                          //失败回调函数
                    )

            })

        })
    </script>
</body>

</html>

其中个人Token在你注册后可以在个人空间中查看。

四、展示

image

这里我只是简单的将JSON简单转换为字符串显示,如果想要更精细的显示,可以自己对获取到的数据进行解析。

五、总结

只要是符合REST风格的API都可以简单地进行请求,并获取相应的数据。我们在开发中常用的验证码,物流信息查询,人脸识别,身份证验证等等功能都可以通过调用API进行实现,非常方便快捷。感谢Roy Fielding(罗伊·托马斯·菲尔丁)博士提出的REST架构风格,返璞归真,回归简单的请求- 响应本源。

注:REST架构风格在Roy Fielding 博士的2000年毕业论文中被首次提出
Roy Fielding 博士是

  • HTTP协议的主要设计者
  • Apache Web Server的作者
  • Apache软件基金会的联合创始人