心知天气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"

}

]

}

功能比较简单，输入界面

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

点击weather按钮

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

这个只是我再做demo学习这个api用的例子。最后我把这个功能应用到我的网页中，是这样的。

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

下面我附上demo的代码，你们对这个调用过程清楚了可以自己去设置界面。有时候虽然功能很lou界面十分美观，也会变得高大尚的。

百度云盘：链接：http://pan.baidu.com/s/1o7Rb9Bc

密码：zaig

资源下载页：http://download.****.net/detail/qq_36305327/9847616

<!DOCTYPE html>

<head>

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

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

</head>

<body>

<button type="button" id="queryweather" onclick="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数据如何显示

相关推荐