网上的大多数天气接口要么是收费的，要么只支持 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>
相关专题
API
2022-06-15 121API是开发中必备知识点,合理的应用API可以大大节省开发成本,为您整理收集了包含API接口的信息,包含API接口,API代码,API源码,助你更快的学习使用API技术....
- 带五套模板的API接口系统源码 [2024-01-18]
- layui框架API接口调用管理系统源码 [2024-01-16]
- 小西瓜API管理系统源码2.0 [2023-12-07]
- ApiDebug在线api接口调试浏览器插件 [2023-12-07]
- 抖音短视频去水印官方API接口源码 [2023-10-04]