<!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. POST接口测试的请求方式

    一.基础知识 1.HTTP的八种请求方法:GET, POST ,HEAD,OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法. GET请求:请求指定的页面信息,并返回实体 ...

  2. SQL server 字段合并CAST(org_no AS VARCHAR(20))+CAST(page_no AS VARCHAR(20))+CAST(djlb_no AS VARCHAR(20)))

    sql server 字段合并(CAST) ---------------------- select (CAST(org_no AS VARCHAR(20))+CAST(page_no AS VAR ...

  3. POJ 3181 Dollar Dayz ( 完全背包 && 大数高精度 )

    题意 : 给出目标金额 N ,问你用面额 1~K 拼成 N 的方案有多少种 分析 : 完全背包的裸题,完全背包在 DP 的过程中实际就是列举不同的装填方案数来获取最值的 故状态转移方程为 dp[i] ...

  4. WWW基本概念

    1.Internet 2.Intranet 3.万维网 注:万维网不等同于因特网,它只是因特网的一项服务. 4.TCP/IP 5.HTTP 注:HTTP是运行在应用层的一项服务. 注:服务器在没有用户 ...

  5. php 抽象类适配器设计模式

    以Kohana Cache设计为例 1.抽象类:E:\html\tproject\framework\modules\cache\classes\Cache.php <?php defined( ...

  6. jsp页面a标签URL转码问题

    简单的办法只有一句话,在后台对传过来的字符串(value)加一句: String value = new String(value.getBytes("ISO-8859-1"),& ...

  7. 一台电脑多个git使用 push 时候出现denied

    http://my.oschina.net/silentboy/blog/220158 当一台电脑上多个git account 的时候, 出现如下问题, $ git push origin maste ...

  8. 利用 TensorFlow 入门 Word2Vec

    利用 TensorFlow 入门 Word2Vec 原创 2017-10-14 chen_h coderpai 博客地址:http://www.jianshu.com/p/4e16ae0aad25 或 ...

  9. swiper（轮播）组件

    swiper是一个非常强大的组件 但是需要swiper-item这个标签来实现他想显示的内容 swiper-item标签有个item-id的属性,属性值:字符串 是swiper-item的标识符: 一 ...

  10. 二十四、python中sys模块

    '''1.sys.argv:命令行参数List,第一个元素是程序本身路径''' import sys print (sys.argv)-------------------------------[' ...