<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8">

        <title>天气</title>

    </head>

    <body>

        <div id="app">

            <h2>最新天气实况</h2>

            <p>城市：<span></span></p>

            <p>日期：<span></span></p>

            <p>天气：<span></span></p>

            <p>当前气温：<span></span></p>

            <p>风向：<span></span></p>

            <p>最高气温：<span></span></p>

            <p>最低气温：<span></span></p>

            <p>温馨提醒：<span></span></p>

            <h2>未来7天天气预报</h2>

            <table border="1" id="detail">

                <thead>

                    <tr>

                        <th>日期</th>

                        <th>天气</th>

                        <th>当前温度</th>

                        <th>最高气温</th>

                        <th>最低气温</th>

                        <th>风向</th>

                        <th>风力</th>

                    </tr>

                </thead>

                <tbody>

                </tbody>

            </table>

        </div>

        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

        <script>

            $(document).ready(function() {

                $.ajax({

                    url: 'https://www.tianqiapi.com/api/?version=v1&appid=test&appsecret=test',

                    type: 'get',

                    data: {

                        city: "北京"

                    },

                    dataType: 'json',

                    error: function(resp, status) {

                        console.log('请求失败：', status, resp);

                    },

                    success: function(resp, status) {

                        var wCity = resp.city;

                        var wDate = resp.data[0].date;

                        var wWea = resp.data[0].wea;

                        var wTem = resp.data[0].tem;

                        var wWin = resp.data[0].win[0];

                        var wTemMax = resp.data[0].tem1;

                        var wTemMin = resp.data[0].tem2;

                        var wAirTips = resp.data[0].air_tips;

                        $('#app p:nth-child(2) span').html(wCity);

                        $('#app p:nth-child(3) span').html(wDate);

                        $('#app p:nth-child(4) span').html(wWea);

                        $('#app p:nth-child(5) span').html(wTem);

                        $('#app p:nth-child(6) span').html(wWin);

                        $('#app p:nth-child(7) span').html(wTemMax);

                        $('#app p:nth-child(8) span').html(wTemMin);

                        $('#app p:nth-child(9) span').html(wAirTips);

                        $("#detail tbody").empty();

                        for (var i = 0; i < 7; i++) {

                            var forword_day = "<tr><td>" +

                                resp.data[i].day + "</td><td>" +

                                resp.data[i].wea + "</td><td>" +

                                resp.data[i].tem + "</td><td>" +

                                resp.data[i].tem1 + "</td><td>" +

                                resp.data[i].tem2 + "</td><td>" +

                                resp.data[i].win[0] + "</td><td>" +

                                resp.data[i].win_speed + "</td>" +

                                "</tr>";

                            $("#detail tbody").append(forword_day);

                        }

                    }

                })

            })

        </script>

    </body>

</html>

【新手向】一个超简单的基于jQuery ajax的天气预报Demo的更多相关文章

  1. 50行代码实现的一个最简单的基于 DirectShow 的视频播放器

    本文介绍一个最简单的基于 DirectShow 的视频播放器.该播放器对于初学者来说是十分有用的,它包含了使用 DirectShow 播放视频所有必备的函数. 直接贴上代码,具体代码的含义都写在注释中 ...

  2. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  3. 10分钟完成一个最最简单的BLE蓝牙接收数据的DEMO

    这两天在研究蓝牙,网上有关蓝牙的内容非常有限,Github上的蓝牙框架也很少很复杂,为此我特地写了一个最最简单的DEMO,实现BLE蓝牙接收数据的问题, 不需要什么特定的UUID, 不需要什么断开重连 ...

  4. 打造支持apk下载和html5缓存的 IIS（配合一个超简单的android APP使用）具体解释

    为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从serv ...

  5. 基于Jquery+Ajax+Json+高效分页

    摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...

  6. 基于jquery ajax的多文件上传进度条

    效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...

  7. 【新手向】一个超简单的jquery.mCustomScrollbar滚动条插件Demo

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> < ...

  8. 实用的Python（3）超简单！基于Python搭建个人“云盘”

    1 简介 当我们想要从本地向云服务器上传文件时,比较常用的有pscp等工具,但避免不了每次上传都要写若干重复的代码,而笔者最近发现的一个基于Python的工具updog,可以帮助我们在服务器上搭建类似 ...

  9. 超简单！基于Python搭建个人“云盘”

    1. 简介 当我们想要从本地向云服务器上传文件时,比较常用的有pscp等工具,但避免不了每次上传都要写若干重复的代码,而笔者最近发现的一个基于Python的工具updog,可以帮助我们在服务器上搭建类 ...

随机推荐

  1. darknet-yolov3模型预测框size不正确的原因

    问题描述:预测框的中心位置正常,但是预测的框的width和height不正常. 解决方法:使得训练的配置cfg和测试中cfg的输入width, height, anchorbox保持一致! 问题是我在 ...

  2. 从1G到5G，移动通信发展之路

    2G取代1G是历史的必然,诺基亚是2G时代的领航者. 3G是个“半吊子”系统,2G手机只能打电话.发短信,上网很困难.3G的通信标准将信息的传输率提高了一个数量级,这是一个飞跃,它使得移动互联网得以实 ...

  3. react native 之 AsyncStorage

    新版本中不时从react-native导入了,而是 react-native-async-storage 使用static setItem(key: string, value: string, [c ...

  4. easyui 无限级数tree[menulist1 = GetMenuList(sm2,menulist1);]

    // 左侧导航加载 function addNav(data) { $.each(data,function(i, sm1) { var menulist1 = "<ul id='tt ...

  5. 搭建nginx环境（参考腾讯云实验室）

    使用 yum 安装 Nginx: yum install nginx -y 修改 /etc/nginx/conf.d/default.conf,去除对 IPv6 地址的监听,可参考下面的代码示例: s ...

  6. Activiti流量变量(九)

    1什么是流程变量 流程变量在 activiti 中是一个非常重要的角色,流程运转有时需要靠流程变量,业务系统和 activiti结合时少不了流程变量,流程变量就是 activiti 在管理工作流时根据 ...

  7. 【bzoj4137】[FJOI2015]火星商店问题

    *题目描述: 火星上的一条商业街里按照商店的编号1,2 ,…,n ,依次排列着n个商店.商店里出售的琳琅满目的商品中,每种商品都用一个非负整数val来标价.每个商店每天都有可能进一些新商品,其标价可能 ...

  8. assert出问题了？

    刚学习Objective-C那会儿,还不太了解这个世界的惯用法,所以有些地方使用了C/C++的方式,虽然后来做过一定的修改, 但是项目中还是遗留了一些无关紧要的C/C++代码.比如对断言的运用. as ...

  9. ORACLE Physical Standby 级联备库搭建

    搭建oracle 级联DG 现有架构:physical standby 一主二备,在此基础上,在主库下新建备库standby3.级联备库cascade 数据库版本 11.2.0.4 db_name=p ...

  10. CSS镜像

    https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX transform: scaleX(-1);/*左 ...