聚合数据全国天气预报--ajax 通过城市名取数据

2016-11-17 19:06:20来源:CSDN作者:ishxiao人点击

聚合数据天气预报API:https://www.juhe.cn/docs/api/id/39

接口地址: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测试工具请求参数说明:
 名称类型必填说明
 citynamestringY城市名或城市ID,如:"苏州",需要utf8 urlencode
 dtypestringN返回数据格式:json或xml,默认json
 formatintN未来6天预报(future)两种返回格式,1或2,默认1
 keystringY你申请的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, '+');  } })

预览图(比较简单粗糙)

 输入图片说明


文章来源:https://my.oschina.net/mfeng/blog/757756




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台