zoukankan      html  css  js  c++  java
  • 聚合数据天气预报API-ajax 通过城市名取数据

    如需要,可申请聚合数据天气预报API:https://www.juhe.cn/docs/api/id/39,并生成AppKey。

    接口地址:http://v.juhe.cn/weather/index
    支持格式:json/xml
    请求方式:get
    请求示例:http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=您申请的KEY
    调用样例及调试工具:API测试工具
    请求参数说明:
     名称类型必填说明
      cityname string Y 城市名或城市ID,如:"苏州",需要utf8 urlencode
      dtype string N 返回数据格式:json或xml,默认json
      format int N 未来6天预报(future)两种返回格式,1或2,默认1
      key string Y 你申请的key

    HTML部分代码:

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8" >  
        <title>天气预报</title>  
        <script src="jquery-2.1.1.min.js"></script>  
        <link rel="stylesheet" href="w.css">  
    </head>  
    <body>  
      
    <div id="mf_weather">  
        <script src="w.js"></script>  
        <button id="search">天气查询</button>  
        <input id="city" type="text" value="tbody">  
        <div class="ctn">  
        <div id="mufeng">  
      
        </div>  
            <div id="future"></div>  
        </div>      
    </div>  
      
    </body>  
    </html>  
    

    JavaScript部分:

    $(function(){  
            /* 
            * 1.输入城市名 
            * 2,点击的时候发送请求 
            * 3.响应成功渲染页面 
            * */  
      
            $('#search').on('click',function(){  
      
                var city = $('#city').val()||'北京';  
                $citycode=urlencode(city);  
      
     url='http://v.juhe.cn/weather/index?format=2&cityname='+$citycode+'&key=c82727e986a4f6cfc6ba1984f1f9183a';  
                 $.ajax({url: url,  
                     dataType: "jsonp",  
                    type:"get",  
      
                     data:{location:city},  
                    success:function(data){  
                        var sk = data.result.sk;  
            var today = data.result.today;  
            var futur = data.result.future;  
            var fut = "日期温度天气风向";  
                       $('#mufeng').html("<p>" + '当前:  ' + sk.temp + '℃  , ' + sk.wind_direction + sk.wind_strength + ' , ' + '空气湿度' + sk.humidity + ' , 更新时间' + sk.time + "</p><p style='padding-bottom: 10px;'>" + today.city + ' 今天是:  ' + today.date_y + ' ' + today.week + ' , ' + today.temperature + ' , ' + today.weather + ' , ' + today.wind + "<p></p>");  
      
       $('#future').html("<p>" + '未来:  ' + futur[0].temperature+ '℃  , ' + futur[0].weather + futur[0].wind + ' , ' + ' , 更新时间' + futur[0].week+futur[0].date + "</p><p style='padding-bottom: 10px;'>" + today.city + "<p></p>");  
      
               }     });  
      
            });  
      function urlencode (str) {    
        str = (str + '').toString();     
      
        return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/(/g, '%28').    
        replace(/)/g, '%29').replace(/*/g, '%2A').replace(/%20/g, '+');    
    }   
    })  
    

      

    预览图(比较简单粗糙)

     输入图片说明

     
  • 相关阅读:
    HTML基础
    JPA+atomikos实现分布式事务
    SpringBoot使用MybatisGenerator操作数据
    Spring data JPA的多数据源实现
    整合Spring Data JPA操作数据及排序分页
    首次git推送到远端
    SpringBoot结合Jpa的post为空和时间问题
    记一次SptingBoot启动报错Error creating bean with name 'requestMappingHandlerAdapter'
    解决IDEA中Cannot resolve table * 的问题
    Sringboot jdbc 操作数据库
  • 原文地址:https://www.cnblogs.com/annie00/p/6112487.html
Copyright © 2011-2022 走看看