心知天气API如何调用与json数据如何显示
来源:互联网 发布:大数据项目调研内容 编辑:程序博客网 时间:2024/06/06 17:57
心知天气官网:https://www.seniverse.com/doc
首先需要注册获得密钥和ID.
因为我不是会员,这里就简单介绍下,怎么调用并显示。
Json数据如下图所示:
{
results: [
{
location: {
id: "WX4FBXXFKE4F",
name: "北京",
country: "CN",
path: "北京,北京,中国",
timezone: "Asia/Shanghai",
timezone_offset: "+08:00"
},
now: {
text: "多云",
code: "4",
temperature: "35"
},
last_update: "2017-05-20T14:50:00+08:00"
}
]
}
功能比较简单,输入界面
点击weather按钮
这个只是我再做demo学习这个api用的例子。最后我把这个功能应用到我的网页中,是这样的。
下面我附上demo的代码,你们对这个调用过程清楚了可以自己去设置界面。有时候虽然功能很lou界面十分美观,也会变得高大尚的。
百度云盘:链接:http://pan.baidu.com/s/1o7Rb9Bc
密码:zaig
资源下载页:http://download.csdn.net/detail/qq_36305327/9847616
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seniverse API Jsonp Test Page</title>
<script type="text/javascript" src="js/jquery.js"></script>
//下面的代码是加密使用的,大家可以到我的百度云盘下载或者我的CSDN上传文件下载
<script src="src/core.js"></script>
<script src="src/cipher-core.js"></script>
<script src="src/enc-base64.js"></script>
<script src="src/hmac.js"></script>
<script src="src/sha1.js"></script>
</head>
<body>
<div id="content" style="background:blue;height:300px;">
<input type="text" class="form-control" id="inputcity" aria-describedby="inputGroupSuccess3Status">
<button type="button" id="queryweather" onclick="weather()">Weather</button>
</div>
<script>
/******** 本示例仅做开发参考使用,不建议在生产环境下暴露 key! ********/
var UID = "U6F8E3F8AD"; // 测试用 用户ID,请更换成您自己的用户ID
var KEY = "tff0na3ui2ana33x"; // 测试用key,请更换成您自己的 Key
var API = "https://api.seniverse.com/v3/weather/now.json"; // 获取天气实况
var LOCATION = "武汉";
// 除拼音外,还可以使用 v3 id、汉语等形式
// 获取当前时间戳
var ts = Math.floor((new Date()).getTime() / 1000);
// 构造验证参数字符串
var str = "ts=" + ts + "&uid=" + UID;
var result = CryptoJS.HmacSHA1(str,KEY);
var sig = result.toString(CryptoJS.enc.Base64);
sig = encodeURI(sig);
str = str + "&sig=" + sig;
var jsonpCallback = function(data) {
var obj = document.getElementById('content');
var weather = data.results[0];
var text = [];
//控制输入的内容
text.push("Location: " + weather.location.path);
text.push("Weather: " + weather.now.text);
text.push("Temperature: " + weather.now.temperature);
text.push("UpdateTime: " + weather.last_update);
obj.innerText = text.join("\n");
}
function weather(){
var LOCATION = document.getElementById('inputcity').value;
alert(LOCATION);
var url = API + "?location=" + LOCATION + "&" + str + "&callback=jsonpCallback";
// 向 HTML 中动态插入 script 标签,通过 JSONP 的方式进行调用
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url;
$('body').append(newScript);
}
</script>
</body>
</html>
如有任何意见和问题,可以到我的网站www.shaofee.com给我留言。如果你有方法可以留言,我必回访。
- 心知天气API如何调用与json数据如何显示
- 解析心知天气API接口返回的json数据
- Java之调用天气API及解析JSON数据
- 调用心知天气的api显示特定城市的天气
- javascript原生移动云编程7 - 如何调用云数据服务显示实时天气
- Android网络与数据存储03-在线请求天气API,并解析其中的json数据予以显示
- 中国天气api接口,json数据
- php读取百度天气API Json数据
- [学习笔记]如何调用百度天气api,学习自百度api
- 免费PM2.5数据如何获取之PM25.in网站API调用JSON数据处理方法
- 如何使用PHP调用API接口( 如何POST一个JSON格式的数据给Restful服务)
- iOS 简单调用全国天气API,解析JSON
- 如何让Outlook 2013天气显示摄氏度
- Android端天气查询(主要介绍如何利用API获取数据)
- 获取中国天气网天气预报json数据的api接口
- 网络API下获取天气json数据信息
- 雅虎天气API调用
- 天气API的调用
- 关于实现3D立体旋转效果的轮播视图
- ubuntu 终端显示英文,桌面环境显示中文方法
- Python-dict字典
- DOM 事件属性补充
- 手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍
- 心知天气API如何调用与json数据如何显示
- Spring 源码粘贴8
- 程序员:幸福感到底有多重要
- 【百度地图JavaScript API】手机端浏览器定位的实现
- postgresql常用命令
- 【备忘】IBM DB2视频教程下载
- CF
- React Native之TextInput组件实现联想输入
- python-Windows下Anaconda2(Python2)和Anaconda3(Python3)的共存