jQuery调用api

调用天气预报api,返回json数据。

<h3>天气</h3>
<ul id="box"></ul>
<h3>小时天气</h3>
<ul id="hours"></ul>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script>
    $.ajax({
        type: 'GET',
        url: 'https://www.tianqiapi.com/api',
        data: 'https://tianqiapi.com/api?version=v1&appid=37831133&appsecret=o9WbLK2F',
        dataType: 'JSON',
        error: function () {
            alert('网络错误');
        },
        success: function (res) {
            $('#box').append('<li>City: ' + res.city + '</li>');
            $('#box').append('<li>Weather: ' + res.data[0].wea + '</li>');
            $('#box').append('<li>Tips: ' + res.data[0].air_tips + '</li>');
            // 遍历数组
            for (var i = 0; i < res.data[0].hours.length; i++) {
                $('#hours').append('<li>' + (i + 1) + ': 时间: ' + res.data[0].hours[i].day + ' 气温: ' + res.data[0].hours[i].tem + ' </li >');
            }
        }
    });
</script>

参考链接:
http://doc.tianqiapi.com/856473
https://www.tianqiapi.com/index/doc?version=v1

posted @ 2020-05-11 22:58  多弗朗强哥  阅读(533)  评论(0编辑  收藏  举报