<!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. HTML和CSS遇到的细节问题

    一.列表项标记窜出div盒子 列表项标记窜出盒子,是因为设置了 *; } ,消除了<li>元素的默认外边距. 结解决方法:消除*{}选择器或是设置外边距 列表项目标记与边距有关 二.div ...

  2. Quick BI的SQL传参建模可以用在什么场景

    Quick B的SQL传参建模功能提供基于SQL的数据加工处理能力,减轻了IT支撑人员的工作量.在即席查询SQL中,我们用物理字段显示别名来表示参数的占位符,配置完占位符后,就可以在查询控件中进行参数 ...

  3. android 开发架构学习

    Android DataBinding(数据绑定)入门与实战 http://examplecode.cn/2018/07/20/android-databinding-01-introduction/ ...

  4. Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题。 就好比我来说，我两个都用。我深知这两个平台的优缺点。所以，我决定分享我关于这两个移动平台的观点。另外，然后谈谈我对新的 Ubuntu 移动平台的印象和它的优势。 IOS 的优点 虽然这些天我是个十足的 Android 用户，但我必须承认 IOS 在某些方面做的是不错。首先，苹果公司在他们的设备更新方面有更

    Android与IOS的优缺点比较 对 Android 与 IOS 比较是个个人的问题. 就好比我来说,我两个都用.我深知这两个平台的优缺点.所以,我决定分享我关于这两个移动平台的观点.另外,然后谈谈 ...

  5. Apache主要配置文件http.conf

    1.基本概念 Define SRVROOT "/Apache24" ServerRoot "${SRVROOT}" #Apache安装的根路径 #Listen ...

  6. 手把手教你学Vue-3(路由)

    1.路由的作用 1.当我们有多个页面的时候 ,我们需要使用路由,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 简单的路由 const ro ...

  7. gsensor方向调试【转】

    本文转载自:http://blog.csdn.net/guoguo295/article/details/19545089 版权声明:本文为博主原创文章,未经博主允许不得转载. 以下说明主要是针对gs ...

  8. winform最小化及添加右键

    private void PrintService_SizeChanged(object sender, EventArgs e) { if (this.WindowState == FormWind ...

  9. 【win Server】 那些天建立群集和SQL AlwaysOn踩到的雷……

    这是一篇悲伤的博 因为前几天一直在折腾群集配置和AlwaysOn,踩雷有数,但是死到现在没成功... 搭建AlwaysOn环境需要: 1. windows Server2012 DataCenter版 ...

  10. 数论-欧拉函数-LightOJ - 1370

    我是知道φ(n)=n-1,n为质数  的,然后给的样例在纸上一算,嗯,好像是找往上最近的质数就行了,而且有些合数的欧拉函数值还会比比它小一点的质数的欧拉函数值要小,所以坚定了往上找最近的质数的决心—— ...