心知天气API如何调用与json数据如何显示

心知天气官网：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>

<head>

<title>Seniverse API Jsonp Test Page</title>

//下面的代码是加密使用的，大家可以到我的百度云盘下载或者我的CSDN上传文件下载

</head>

<body>

<button type="button" id="queryweather" οnclick="weather()">Weather</button>

</div>

/******** 本示例仅做开发参考使用，不建议在生产环境下暴露 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，根据城市名/id查询天气
心知天气api可以根据城市名/id查询天气,向开发者提供的准确.稳定.丰富的天气数据云服务. 接口名称:心知天气api 接口平台:聚合数据接口地址:http://v.juhe.cn/weather/ ...
STM32使用ESP8266模块AT指令连接心知天气API获取天气信息
由于之前使用STM32单片机来开发一些物联网的小项目,接触到了WIFI模块ESP8266,所以写下来记录一下.本文主要介绍的是STM32通过发送AT指令集来控制ESP8266 WIFI模块连接WiFi ...
心知天气api接口怎么用？
心知天气是什么?心知天气提供API吗? 心知天气是国内领先的气象服务商,由中国气象局官方授权的商业气象服务公司,基于气象数值预报和人工智能技术,提供高精度气象数据.天气监控机器人.气象数据可视化产品, ...
Android中基于心知天气API获取天气信息
Android中基于心知天气获取天气信息 JSON JSON简介 JSON对象 JSON数组 JSON解析 Android中获取天气获取天气的流程获取心知天气的API key 获取心知天气的API ...
利用Arduino Esp8266 心知天气API 获取天气预报信息（修改后可以DIY一个小型的桌面气象台）
前期准备: 注册心知天气,获取API密钥 https://www.seniverse.com 生成API请求地址,北京今天和未来4天的预报请求地址如下: https://api.seniverse. ...
c语言获取天气信息示例(通过心知天气api获取)
关于curl/curl.h库的使用,参考下述内容: VS2010编译libcurl库并简单使用(c语言)_西晋的no1的博客-CSDN博客 1.先在心知天气注册,获取私钥: https://www. ...
Android实现-心知天气API接口开发(天气预报app)
自己开发app之心知天气APP程序代码粘贴即可用.完整代码附最后. 一.环境配置和素材准备第一步:去知心天气注册开发者账号查看自己的token.注册好登录进去--控制台---免费版--秘钥.这里的秘 ...
使用 Fiddler 调试心知天气，stm32 esp8266获取天气api
心知天气 - 免费用户的功能: 国内 370 个主要城市天气实况,包括天气现象文字.代码和气温 3 项数据未来 3 天天气预报,包括白天天气现象文字及代码.晚间天气现象文字及代码.当天最高温度和最 ...
用cJSON解析心知天气返回的数据包
目录: 文章目录调用天气API接口获取天气信息解析天气信息字符串测试结果欢迎关注后台网友留言,说参考这个链接天气数据解析1–JSON格式数据处理天气API接口返回的数据,中间遇到了点问题 ...

心知天气API如何调用与json数据如何显示

心知天气API如何调用与json数据如何显示相关推荐

最新文章

热门文章