Ajax 通过城市名获取数据(全国天气预报API)

更新时间：2016年11月02日 11:32:32 投稿：mrr

本文给大家分享全国天气预报API Ajax 通过城市名获取数据，通过html和js两部分代码实现天气预报效果，输入城市就会出现天气情况，效果非常棒，感兴趣的朋友可以参考下

预览图（比较简单粗糙）

聚合数据全国天气预报接口：https://www.juhe.cn/docs/api/id/39

接口地址：http://v.juhe.cn/weather/index
支持格式：json/xml
请求方式：get
请求示例：http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=您申请的KEY
调用样例及调试工具：API测试工具
请求参数说明：
名称类型必填说明
cityname string Y 城市名或城市ID，如：”苏州”，需要utf8 urlencode
dtype string N 返回数据格式：json或xml,默认json
format int N 未来6天预报(future)两种返回格式，1或2，默认1
key string Y 你申请的key

HTML部分代码：

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" >
<title>天气预报</title>
<script src="jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="w.css">
<div id="mf_weather">
<script src="w.js"></script>
<button id="search">天气查询</button>
<input id="city" type="text" value="tbody">
<div class="ctn">
<div id="mufeng">
</div>
<div id="future"></div>
</div> 
</html>

JavaScript部分：

/*
* 1.输入城市名
* 2，点击的时候发送请求
* 3.响应成功渲染页面
* */
$('#search').on('click',function(){
var city = $('#city').val()||'北京';
$citycode=urlencode(city);
url='http://v.juhe.cn/weather/index?format=2&cityname='+$citycode+'&key=c82727e986a4f6cfc6ba1984f1f9183a';
$.ajax({url: url,
dataType: "jsonp",
type:"get",
data:{location:city},
success:function(data){
var sk = data.result.sk;
var today = data.result.today;
var futur = data.result.future;
var fut = "日期温度天气风向";
$('#mufeng').html("" + '当前: ' + sk.temp + '℃ , ' + sk.wind_direction + sk.wind_strength + ' , ' + '空气湿度' + sk.humidity + ' , 更新时间' + sk.time + "" + today.city + ' 今天是: ' + today.date_y + ' ' + today.week + ' , ' + today.temperature + ' , ' + today.weather + ' , ' + today.wind + "");
$('#future').html("" + '未来: ' + futur[0].temperature+ '℃ , ' + futur[0].weather + futur[0].wind + ' , ' + ' , 更新时间' + futur[0].week+futur[0].date + "" + today.city + "");
} });
});
function urlencode (str) {
str = (str + '').toString();
return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/$/g, '%28').
replace(/$/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
}
})

以上所述是小编给大家介绍的Ajax 通过城市名获取数据(全国天气预报API)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

ajax天气预报

php ajax网站浏览统计功能的简单实现
这个功能应该是很多网站都需要的,这里仅仅实现了一个基于文件的简易版本,数据库的版本请自行参考实现,我这里实现的功能很不完善,比如未过滤是否为同一访客,是否为同一IP等等,这里仅仅是给大家提供一个参考.
2008-09-09
Ajax基础使用详解
这篇文章主要介绍了Ajax基础使用详解，是前后台交互的能⼒也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具，本篇就来对ajax基础进行详细讲解,需要的朋友可以参考下
2023-05-05
菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)
Ajax是Asynchronous JavaScript and XML，其核心是通过XMLHttpRequest对象以一种异步的方式向服务器发送请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作(呵呵、、、说的有点吓人！)
2012-11-11
Ajax实现的异步传输与验证示例代码
Ajax异步传输应用很广当用户注册时，当用户刚一输完，立即判断用户是否存在这就用到了异步传输
2014-01-01
Ajax发送和接收请求
这篇文章主要为大家详细介绍了Ajax发送和接收请求的相关资料，感兴趣的小伙伴们可以参考一下
2016-02-02
关于ajax的多次请求问题
下面小编就为大家带来一篇关于ajax的多次请求问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
ajax实时任务提示功能的实现代码
本项目运用了 FLEAPHP,MYSQL,SMARTY,FCKEDItor,JSON,PROTOTYPE的技术,在这里首先要感谢这些开源项目的开发者给我们带来的好东西,其次要感谢[生气猪--让我帮她做一个这样的小东西来提醒她按时完成事情].花了一个3个小时完成.希望给大家起到抛砖引玉的作用啊....
2008-09-09
ajax 不错的应用
ajax 不错的应用...
2006-07-07
Ajax请求成功后return无法接收到返回值的问题及解决方案
项目中需要频繁的用到ajax请求,所以就想用一个方法将整个请求封装起来,直接调用方法传递参数,然后返回请求结果就可以了,这篇文章主要介绍了ajax请求成功后return无法接收到返回值,需要的朋友可以参考下
2023-10-10
AJAX 图片展示框架56个提升开发效率
随着Lightbox和image Gallery的广泛应用，目前基于异步刷新技术动态展示图片的框架已经是百家争鸣，在这里我收集汇总了56个比较通用的框架，与大家分享！
2009-08-08