<!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. luogu P1037 产生数 x

    P1037 产生数 题目描述 给出一个整数 n(n<10^30) 和 k 个变换规则(k<=15). 规则: 一位数可变换成另一个一位数: 规则的右部不能为零. 例如:n=234.有规则( ...

  2. IOC和AOP使用扩展之AOP详解实现类

    摘要:   “Depend on yourself” is what nature says to every man.  Parents can help you. Teachers can hel ...

  3. python图像处理——频率域增强

    图像的傅里叶变换: import chardet import numpy as np import cv2 as cv import cv2 from PIL import Image import ...

  4. permutation 2

    permutation 2 猜了发结论过了== $N$个数的全排列,$p_{1}=x,p_{2}=y$要求$|p_{i+1}-p_{i}|<=2|$求满足条件的排列个数. 首先考虑$x=1,y= ...

  5. rman备份/恢复

    全备脚本 cat rman_full.sh #!/bin/bash export ORACLE_BASE=/opt/oracle export ORACLE_HOME=$ORACLE_BASE/pro ...

  6. （转载）《利用Python进行数据分析·第2版》电子书

    https://www.jianshu.com/p/04d180d90a3f https://www.jianshu.com/p/04d180d90a3f https://www.jianshu.co ...

  7. netflow-module

    https://www.elastic.co/guide/en/logstash/current/netflow-module.html

  8. mvn 与 pom.xml

    mvn 安装 wget http://mirrors.hust.edu.cn/apache//maven/maven-3/3.0.5/binaries/apache-maven-3.0.5-bin.t ...

  9. 安装python是提示 0x80072f7d 错误的解决办法

    最简单的方法: Internet 选项-> 高级里面 勾选使用TLS1.1和使用TLS1.2即可.实际测试是ok的

  10. 007-Spring Boot-@Enable*注解的工作原理-EnableConfigurationProperties、ImportSelector、ImportBeanDefinitionRegistrar

    一.@Enable* 启用某个特性的注解 1.EnableConfigurationProperties 回顾属性装配 application.properties中添加 tomcat.host=19 ...