【jQuery】基于天行数据接口的天气预报

DomCode

已于 2022-07-11 16:48:56 修改

阅读量1.9k

点赞数 2

分类专栏： # jQuery 文章标签： ajax

于 2021-11-13 18:21:18 首次发布

本文链接：https://blog.csdn.net/weixin_43094619/article/details/121307859

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、准备工作

1、注册天行数据账号

在这里插入图片描述

2、申请接口

在这里插入图片描述

3、在天行数据搜索天气预报，点击进去后申请

在这里插入图片描述

4、申请之后点击导航栏上的控制台，进入之后再数据管理

在这里插入图片描述
这个key调接口需要的，每个人不一样的，注意隐私！

5、熟悉接口文档

在这里插入图片描述
1）天气图片可以在文档中下载
2）编译时需要引入jQuery文件

二、编写代码

在这里插入图片描述

1、编写HTML文件

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>全国各地城市实时天气预报查询HTML5网页模板</title>
    <meta name="keywords" content="全国各地,城市,实时天气,预报,查询,HTML5网页模板" />
    <meta name="description" content="全国各地城市实时天气预报查询HTML5网页模板下载。左上输入想要查询的城市（支持市和县），点击查询即可获取当天及未来5天的天气预报。" />
    <link rel="stylesheet" href="css/weather.css" />
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <header>
        <h1>天气预报</h1>
        <div id="weather_search">
            <span><input id="text" type="text" placeholder="请输入您要查询的城市" /></span>
            <span><input id="btn" type="button" value=" 查询天气" /></span>
        </div>
    </header>
    <section>
        <div id="today_container">
            <div>
                <img src="./images/weather_icon/" id="today_img" alt="今日天气" />
            </div>
            <div>
                <div class="main_info">
                    <span class="info" id="today_city">城市</span>|
                    <span class="info" id="today_date">201X-XX-XX</span>|
                    <span class="info" id="today_week">星期X</span>|
                    <span class="info" id="today_other">---</span>
                </div>
                <div class="more_info">
                    今日温度：
                    <span class="info" id="today_wd">-----</span> 风力：
                    <span class="info" id="today_fl">-----</span> 风向：
                    <span class="info" id="today_fx">-----</span> 降雨量：
                    <span class="info" id="today_pm">--</span>
                </div>
                <div class="more_info" style="margin-left:150px">
                    紫外线强度：
                    <span class="info" id="today_zwx">---</span> 能见度：
                    <span class="info" id="today_xc">---</span> 相对湿度:
                    <span class="info" id="today_gm">---</span> 降雨概率：
                    <span class="info" id="today_cy">---</span>
                </div>
                <div class="more_info" style="margin-left:150px">
                    生活指数提示：
                    <span class="info" id="tips">天气暖和，适宜着单层......</span>
                </div>
            </div>
        </div>
        <div id="future_container"></div>
    </section>
    <script src="./js/index.js"></script>
</body>
</html>

2、编写JavaScript文件

1）打开页面的时候发送获取广州城市天气请求渲染到页面中
2）点击按钮的时候获取输入框的值拼接成参数，发送接口，获取对应的城市天气渲染到页面中

$(function() {
// 1 获取广州城市天气 请求  渲染到页面中
    renderByCity("广州");
    function renderByCity(city) {
        // 0 完整的实例 http://api.tianapi.com/tianqi/index?key=APIKEY&city=上海市
        // 1 url  http://api.tianapi.com/tianqi/index
        // 2 请求方式  get 
        // 3 请求参数   key 、 city
        // 3.1 key 自己复制 个人网站上的密钥 key 
        // 3.2 city 城市的名称 
        const url = "http://api.tianapi.com/tianqi/index";
        const key = "复制key";
        $.get(url, { key, city }, (res) => {
            const newslist = res.newslist;
            // console.log(newslist);//
            console.table(newslist); // 如果 newlist 是一个对象数组
            // 为了渲染页面方便 需要将 数组 分成两个部分
            // 第一个部分 只是存放 第一天的天气 数据
            // const firstDay = newslist[0];//  low 
            // firstDay 第一天的数据 
            // newslist 剩下6天的数据 
            const firstDay = newslist.shift();
            // 第二个部分 要存放 6天的数据 
            // 渲染第一天的天气 
            $("#today_img").attr('src', './images/weather_icon/' + firstDay.weatherimg);
            $("#today_city").text(firstDay.area);
            $("#today_date").text(firstDay.date);
            $("#today_week").text(firstDay.week);
            $("#today_other").text(firstDay.weather);
            $("#today_wd").text(firstDay.real);
            $("#today_fl").text(firstDay.windsc);
            $("#today_fx").text(firstDay.wind);
            $("#today_pm").text(firstDay.pcpn);
            $("#today_zwx").text(firstDay.uv_index);
            $("#today_xc").text(firstDay.vis);
            $("#today_gm").text(firstDay.humidity);
            $("#today_cy").text(firstDay.pop);
            $("#tips").text(firstDay.tips);
            console.log(firstDay.weatherimg);
            console.log(today_img);
            // 渲染剩下6天的天气 
            let otherHTML = "";
            newslist.forEach(day => {
                otherHTML += `
        <div class="future_box">
        <img src="./images/weather_icon/${day.weatherimg}" alt="天气" />
        <span class="future_info">${day.date}</span>
        <span class="future_info">${day.week}</span>
        <span class="future_info">${day.real}</span><span class="future_info">${day.lowest}-${day.highest}</span>
        </div>
        `;
            })
            $("#future_container").html(otherHTML);
        })
    }
    // 2 点击按钮的时候
    $("#btn").click(function() {
        renderByCity($("#text").val());
    })
})