[Js/Jquery]天气接口简单使用

写在前面

今天在群里有朋友使用一个天气api,觉得挺实用的,就记录一下。省的以后再花费功夫去找。

地址:http://www.k780.com/api,在这个网站提供了实用的几种接口,比如查询ip,天气,身份证等信息。

参数介绍

一个例子

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>天气</title>
 6     <script src="jquery-1.11.0.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         $(function () {
 9             $.ajax({
10                 url: "http://api.k780.com:88/?app=weather.today&weaid=1&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=?",
11                 dataType: "jsonp",
12                 type:"Post",
13                 jsonpCallback: "jsonpCallback",
14                 success: function (data) {
15                     var $ul = $("<ul></ul>");
16                     $.each(data, function (i, v) {
17                         if (i=="success") {
18
19                         } else {
20                             $("#dvWeather").html("weaid:" + v.weaid + "<br/>" + "days:" + v.days + "<br/>" + "week:" + v.week + "<br/>" + "cityno:" + v.cityno + "<br/>" + "citynm:" + v.citynm + "<br/>" + "cityid:" + v.cityid + "<br/>" + "temperature:" + v.temperature + "<br/>" + "humidity:" + v.humidity + "<br/>" + "weather:" + "<br/>" + "weather_icon:" + "<img src='" + v.weather_icon + "'></img>" + "<br/>" + "weather_icon1:" + "<img src='" + v.weather_icon1 + "'></img><br/>" + "wind:" + v.wind + "<br/>" + "winp:" + v.winp + "<br/>" + "temp_high:" + v.temp_high + "<br/>temp_low:" + v.temp_low + "<br/>humi_high:" + v.humi_high + "<br/>humi_low:" + v.humi_low + "<br/>weatid:" + v.weatid + "<br/>weatid1" + v.weatid1 + "<br/>windid:" + v.windid + "<br/>winpid:" + v.winpid);
21                         }
22
23                     });
24                 },
25                 error: function (responseText, textStatus, XMLHttpRequest) {
26                     alert(textStatus);
27                 }
28             });
29         });
30
31     </script>
32 </head>
33 <body>
34     <div id="dvWeather"></div>
35 </body>
36 </html>

结果

总结

最后发现这个api也是收费的,对免费的访问次数也是有限制的。不过对于学习还是有点用处的,使用该api,研究研究跨域请求还是有帮助的。

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/4181259.html
时间: 2024-08-07 11:08:46

[Js/Jquery]天气接口简单使用的相关文章

js/jQuery简单实现选项卡功能

 本篇文章主要是对js/jQuery简单实现选项卡功能的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 第一种方法是用原生的js代码如下:    代码如下: <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>简单选项卡</title>     <style type="text/css"

使用js dom和jquery分别实现简单增删改_jquery

软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大: 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" con

js获取新浪天气接口的实现代码_javascript技巧

js获取新浪天气接口的实现代码 <!doctype html> <html class="no-js fixed-layout"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>天气</title> </

原生JS取代一些JQuery方法的简单实现_javascript技巧

1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorthand var $ = function (el) { return document.querySelectorAll(el); } querySelectorAll方法返回的是NodeList对象,需要转换为数组. myList = Array.prototype.slice.call(myNo

JS/jQuery判断DOM节点是否存在的简单方法_javascript技巧

JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法,我们通常获取DOM节点几乎都是document.getElement..方法,会返回一个object数组合集,我们可以通过object[0],object[1]这样来访问这个合集的每一个对象.既然返回的是数组合集,那么就有length属性,而length大于等于1即表示DOM节点存在页面中 代码: Object.prototype.exist = function(){ if(typeof th

jQuery实现的简单折叠菜单(折叠面板)效果代码_jquery

本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的折叠菜单,可展开一些内容,实际上称它为一个面板比较好,是一个折叠面板,使用了jQuery1.6.2插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X

Dreamweaver扩展:Web开发jQuery UI接口框架

绝大多数的Web设计师和Web开发者可能都会经常使用Adobe的产品来完成工作,本文整理了5个在Web设计开发中最常用jQuery UI 接口框架,帮助你提高项目开发效率.这些jQuery UI 框架操作非常简单,即使你是初学者. 安装这些Dreamweaver扩展前,你需要检查你的Dreamweaver和Extension Manager版本是否为当前最新版本: Dreamweaver CS4 and Extension Manager CS4. 1. jQuery UI Calendar j

Node.js和MongoDB实现简单日志分析系统

  Node.js和MongoDB实现简单日志分析系统  这篇文章主要介绍了Node.js和MongoDB实现简单日志分析系统,本文给出了服务器端.客户端.图表生成.Shell自动执行等功能的实现代码,需要的朋友可以参考下     在最近的项目中,为了便于分析把项目的日志都存成了JSON格式.之前日志直接存在了文件中,而MongoDB适时闯入了我的视线,于是就把log存进了MongoDB中.log只存起来是没有意义的,最关键的是要从日志中发现业务的趋势.系统的性能漏洞等.之前有一个用Java写的

jquery代码实现简单的随机图片瀑布流效果

  jquery代码实现简单的随机图片瀑布流效果 瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,这里分享给大家,有需要的小伙伴参考下吧. 为了便于大家理解我使用了jQuery.当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3