网上的大多数天气接口要么是收费的,要么只支持 iframe 嵌入方式,根本就没法用……
今天“不小心”从 360 那挖到了一个支持 json 的天气接口,支持自动判断地区,获取最近五天的天气,支持天气相关信息展示。非常好用!
接口请求格式如下:
http://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome&code=【地区编码】&_jsonp=【jsonp回调函数】
其中的 地区编码 与中国天气网的地区编码是一样的。如果不设置这个参数,则默认显示本地的天气状况。
简易的调用示例源码如下:(请自行进行界面美化)
<!DOCTYPE html> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/> <title>天气接口使用示例</title> <style> body { font-family: microsoft yahei; } </style> <scriptsrc="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> </head> <body> <divid="output"></div> <scripttype="text/javascript"charset="utf-8"> $.ajax({ type: "GET", url: "http://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome", dataType : "jsonp", jsonp: "_jsonp",//参数名 success: function(jsonData){ var html; html= '数据更新时间:'+ jsonData.pubdate + ' ' + jsonData.pubtime + '<br>'; html += '地区:' + jsonData.area[0][0] + ' ' + jsonData.area[1][0] + ' ' + jsonData.area[2][0] + '<br>'; html += '天气情况:<br>'; for(var i=0; i<jsonData.weather.length; i++) { html += jsonData.weather[i].date + '<br>'; if(jsonData.weather[i].info.dawn !== undefined) { html += '早晨天气:' + jsonData.weather[i].info.dawn[1] + ' 气温:' + jsonData.weather[i].info.dawn[0] + '~' + jsonData.weather[i].info.dawn[2] + '℃ ' + jsonData.weather[i].info.dawn[3] +' '+ jsonData.weather[i].info.dawn[4] + '<br>'; } if(jsonData.weather[i].info.day !== undefined) { html += '白天天气:' + jsonData.weather[i].info.day[1] + ' 气温:' + jsonData.weather[i].info.day[0] + '~' + jsonData.weather[i].info.day[2] + '℃ ' + jsonData.weather[i].info.day[3] +' '+ jsonData.weather[i].info.day[4] + '<br>'; } if(jsonData.weather[i].info.night !== undefined) { html += '夜间天气:' + jsonData.weather[i].info.night[1] + ' 气温:' + jsonData.weather[i].info.night[0] + '~' + jsonData.weather[i].info.night[2] + '℃ ' + jsonData.weather[i].info.night[3] +' '+ jsonData.weather[i].info.night[4] + '<br>'; } html += '<br>'; } html += '穿衣:<br>'; html += '【' + jsonData.life.info.chuanyi[0] + '】 ' + jsonData.life.info.chuanyi[1] + '<br><br>'; html += '感冒:<br>'; html += '【' + jsonData.life.info.ganmao[0] + '】 ' + jsonData.life.info.ganmao[1] + '<br><br>'; html += '空调:<br>'; html += '【' + jsonData.life.info.kongtiao[0] + '】 ' + jsonData.life.info.kongtiao[1] + '<br><br>'; html += '污染:<br>'; html += '【' + jsonData.life.info.wuran[0] + '】 ' + jsonData.life.info.wuran[1] + '<br><br>'; html += '洗车:<br>'; html += '【' + jsonData.life.info.xiche[0] + '】 ' + jsonData.life.info.xiche[1] + '<br><br>'; html += '运动:<br>'; html += '【' + jsonData.life.info.yundong[0] + '】 ' + jsonData.life.info.yundong[1] + '<br><br>'; html += '紫外线:<br>'; html += '【' + jsonData.life.info.ziwaixian[0] + '】 ' + jsonData.life.info.ziwaixian[1] + '<br><br>'; html += 'PM2.5: ' + jsonData.pm25.pm25[0]; $("#output").html(html); } }); </script> </body> </html>
本文转载自:精准像素:11px.cn ,感谢作者分享实用知识