ajax查询全国天气预报，使用聚合数据api接口

空值情况

苏州

界面如上，可以根据自己需求再添加一些内容。
功能需求：根据城市名称查询该城市的天气情况，输入空值的时候默认查询北京天气
这个是我使用聚合数据提供的免费20次请求全国天气预报API，注册了，申请使用了就会获得一个key值

实现代码如下：
jquery.min.js、template-web.js需要引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>天气预报请求</title><link rel="stylesheet" href="css/css.css"><script src="js/jquery.min.js"></script><script src="js/jquery.js"></script><script src="js/template-web.js"></script><script src="js/index.js"></script>
</head>
<body><!-- 版心 --><div class="box"><!-- header start --><div class="header"><p class="headerText"><h2>全国城市天气查询</h2></p></div><!-- header end --><!-- request start --><div class="resquest"> <input type="text" placeholder="请输入查询城市的名称"  id="btn"></div><!-- request end --><!-- content start --><div class="content"><ul id="list"><script type="text/html" id="tmplt" ><li>城市：{{result.today.city}}</li><li>日期：{{result.today.date_y}}</li><li>时间：{{result.sk.time}}</li><li>天气：{{result.today.weather}}</li><li>温度：{{result.today.temperature}}</li><li>风向风力：{{result.today.wind}}</li><li>温馨提醒：{{result.today.dressing_advice}}</li></script></ul></div><!-- content end --></div>
</body>
</html>

$(function(){//按回车键获取文本框的值$("#btn").on('keydown',function(event){if(event.keyCode == 13){var param = $(this).val()||'北京';$citycode = encodeURI(param);getWeather($citycode);}});function getWeather(param){$.ajax({type:'get',url:'http://v.juhe.cn/weather/index?format=2&cityname='+param+'&key=3b75f15dc9ab54e9c9ae455f8340c9f1',dataType:'jsonp',jsonp:'callback',success:function(data){// console.log(data);var html=template('tmplt',data);$("#list").html(html);}});}
})

*{margin:0;padding: 0;
}li{list-style: none;
}
.box{width: 300px;min-height: 354px;background-color: skyblue;margin: auto auto;padding:20px;text-align: center;color: #fff;
}#btn{margin-top: 10px;padding-left: 5px;height: 20px;border: 0px solid #fff;color:#FFB6C1;border-radius: 5%;
}/*修改placeholder的样式*/
input::-webkit-input-placeholder{color:#999;font-size: 12px;font-weight: lighter;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */color:#999;font-size: 12px;font-weight: lighter;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */color:#999;font-size: 12px;font-weight: lighter;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ color:#999;font-size: 12px;font-weight: lighter;
}.content{width: 260px;min-height: 240px;border:1px solid #AFEEEE;margin-top: 10px;text-align: left;padding:20px;line-height: 20px;
}.list{}

ajax查询全国天气预报，使用聚合数据api接口相关推荐

Java：聚合数据API接口调用城市天气预报
Java: 聚合数据API接口调用城市天气预报点击进入[数据聚合_数据接口调用_开发者数据API开放平台](官网) 在pom文件中,加入依赖 <dep ...
Ajax怎么获取天气,Ajax获取全国天气预报的API数据
这次给大家带来Ajax获取全国天气预报的API数据,Ajax获取全国天气预报API数据的注意事项有哪些,下面就是实战案例,一起来看一下. 预览图(比较简单粗糙) 聚合数据全国天气预报接口:https: ...
使用聚合数据API查询快递数据-短信验证码-企业核名
有位朋友让我给他新开的网站帮忙做几个小功能,如下: 输入快递公司.快递单号,查询出这个快件的所有动态(从哪里出发,到了哪里) 在注册.登录等场景下的手机验证码(要求有一定的防刷策略) 通过输入公司名的 ...
通过聚合数据API实现快递数据查询-短信验证码-企业核名
有位朋友让我给他新开的网站帮忙做几个小功能,如下: 输入快递公司.快递单号,查询出这个快件的所有动态(从哪里出发,到了哪里) 在注册.登录等场景下的手机验证码(要求有一定的防刷策略) 通过输入公司名的 ...
安卓开发之使用第三方的聚合数据API，QQ测吉凶案、身份证号码查询。
在安卓开发中,肯定需要很多API接口, 比如天气获.快递实时信息.身份证号码查询和基本的短信验证码. API(Application Programming Interface,应用程序编程接口)是一 ...
调用聚合数据API实现手机号码归属地查询
调用聚合数据API实现手机号码归属地查询 1．作者介绍 2．相关介绍 2.1 什么是聚合数据? 2.2 API介绍 2.3 手机号码归属地 3．实验过程 3.1如何调用聚合数据API 3.2代码实现 ...
Android使用HttpURLConnection返回并解析JSON数据，以聚合数据API之星座配对为例
目录一.实现效果二.注册聚合网并申请key 三.Android Studio具体实现 3.1 导入json解析所需依赖包 3.2 构造显示界面layout 3.3 核心代码 3.3.1 使用Htt ...
利用聚合数据API进行Android开发之短信验证码
在说Android中的短信验证码这个知识点前,我们首先来了解下聚合数据聚合数据介绍聚合数据是一家国内最大的基础数据API提供商,专业从事互联网数据服务.免费提供从天气查询.空气质量.地图坐标到金融 ...
通过聚合数据API获取微信精选文章
思路在聚合数据申请账号(https://www.juhe.cn/) 通过聚合数据api获取微信精选文章api 通过newspaper库提取相应的文本内容,关于newspaper库的使用方法可以参考这 ...

ajax查询全国天气预报，使用聚合数据api接口

ajax查询全国天气预报，使用聚合数据api接口相关推荐

最新文章

热门文章