调用第三方天气接口实现天气查询和展示

//跨域请求天气地址
			var crossDaomainRequest = {
				createCORS: function(method, url) {
					var xhr = new XMLHttpRequest();
					if(‘withCredentials‘ in xhr) {
						xhr.open(method, url, true);
					} else if(typeof XDomainRequest != ‘undefined‘) {
						var xhr = new XDomainRequest();
						xhr.open(method, url);
					} else {
						xhr = null;
					}
					return xhr;
				},
				get: function(url, callback) {
					var request = this.createCORS(‘get‘, url);
					if(request) {
						request.onload = function() {
							callback(request.response? request.response: request.responseText)
						};
						request.send();
					}
				}
			};

			crossDaomainRequest.get(‘http://wthrcdn.etouch.cn/WeatherApi?citykey=101100301‘, function(result) {
				 var elements = $(result);
				  if (elements.length > 0) {
		            var cityName = elements.find("city").text();  //当前城市
		            var updateTtime = elements.find("updatetime").text(); //更新时间
		            var wendu = elements.find("wendu").text();  //温度
		            var shidu = elements.find("shidu").text();  //湿度
		            var fengxiang = elements.find("fengxiang").first().text(); //风向
		            var fengli = elements.find("fengli").first().text();  //风力
		            var weatherToday = elements.find("weather").first(); //天气详情包含白天和夜晚
		            var date = weatherToday.find("date").text(); //天气详情包含白天和夜晚
		            var high = weatherToday.find("high").text().replace("高温", "").replace("℃","").replace(" ","");
		            var low = weatherToday.find("low").text().replace("低温", "").replace("℃", "").replace(" ", "");
		            //alert(high+‘~‘+low)
		            var dayType = weatherToday.find("day").find("type").text();
		            var dayfengxiang = weatherToday.find("day").find("fengxiang").text();
		            var dayfengli = weatherToday.find("day").find("fengli").text();

		            var nightType = weatherToday.find("night").find("type").text();
		            var nightfengxiang = weatherToday.find("night").find("fengxiang").text();
		            var nightfengli = weatherToday.find("night").find("fengli").text();
		            var dImageUrl = ("/Scripts/Bus/DynamicDiagnosis/images/weather/" + dayType + ".gif");  //白天天气的图片
		            var nImageUrl = ("/Scripts/Bus/DynamicDiagnosis/images/weather/n" + nightType + ".gif");
		            var strTmplate = "<div class=\"weather-icon\">" +
		                "<span class=\"day-icon\" style=\"background-image:url(" + dImageUrl + "); background-size: 100% 100%; \" title=\"白天:" + dayType + " " + dayfengxiang + " " + dayfengli + "\" ></span>" +
		                "<span class=\"night-icon\" style=\"background-image:url(" + nImageUrl + "); background-size: 100% 100%; \" title=\"夜间:" + nightType + " " + nightfengxiang + " " + nightfengli + "\"></span>" +
		                "</div>" +
		                "<div class=\"w-left\">" +
		                "<h2>今日天气<span>" + cityName + "</span></h2>" +
		                "<dl class=\"temperature clearfix\">" +
		                " <dt >" + low + "~" + high + "</dt>" +
		                    "<dd>" + "℃ " + fengxiang + fengli+
		                        "<div>白天:" + dayType + " " + dayfengxiang + " " + dayfengli + "</div>" +
		                       " </dd>" +
		                " </dl>" +
		                "<div class=\"realtime-tem\" style=\"font-size:12px;\">" + (new Date().getMonth() + 1) + "月" + date + "(实时:" + wendu + "℃,湿度:" + shidu + ")</div>" +
		            "</div>";
		            $(document.body).html(strTmplate);
				}

		 });
时间: 2024-08-07 04:15:24

调用第三方天气接口实现天气查询和展示的相关文章

C# 调用第三方DLL z

http://blog.163.com/[email protected]/blog/static/104072678201311721326318/ 以下代码为本人在实际项目中编写的调用第三方DLL接口程序的完整代码. public class ExecuteDLL : Form { ...//忽略与调用DLL无关的代码 private IntPtr hModule = IntPtr.Zero; /// <summary> /// 调用HIS系统提供的DLL接口程序查看检查申请单 ///DL

PHP调用API接口实现天气查询功能

天气预报查询接口API,在这里我使用的是国家气象局天气预报接口 使用较多的还有:新浪天气预报接口.百度天气预报接口.google天气接口.Yahoo天气接口等等. 1.查询方式 根据地名查询各城市天气情况 2.请求URL地址http://route.showapi.com/9-2 3.接口参数说明: 一.系统级参数(所有接入点都需要的参数): 二.应用级参数(每个接入点有自己的参数): 4.返回参数 以JSON格式返回结果 1)系统级参数(所有接入点都会返回的参数) 2)应用级参数(系统级输出参

php 调用天气接口

前几天没事的时候,浏览博客看到了一篇免费天气接口的文章,然后调用了一下文章中提到的接口,自己琢磨了半天,把数据处理了一下,虽然现在用不到,但是说不定以后会用,所以打算记录一下,毕竟这也算是自己第一次在博客园里写出了原创的代码 (→_→) 进入正题 1.先放接口: 1.1 返回 json 形式 1.1.1 通过城市名(北京/北京市)获取当前城市当前温度及未来一周天气预报 (Json数据) :包含台湾的主要县市 接口:http://wthrcdn.etouch.cn/weather_mini?cit

Ajax--art-template + 调用天气接口

一.实现原理: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 </body> 10 </html> 11 <!--script标签如果指定一个非标准类型ty

调用天气接口获取天气预报

最新做到一个小练习,涉及到天气预报的温度获取,首先感谢众多前辈提供的大量demo,但是美中不足在于,之前大多数demo所使用的天气接口基本上失效,或者收费了.偶然之间找到一个天气的接口 http://doc.tianqiapi.com/603579 (如有侵权请联系作者删除),截图如下: 几近完善的一个接口及例子,感谢 https://www.tianqiapi.com/ 此网站所提供的免费接口.同时此接口还提供了JS调用实例,所以基本上直接引用就可以得到所需要的温度范围了 $(function

[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="Conten

android 百度天气接口

百度天气接口 之前有篇随笔是说中国气象的天气接口的,但那个接口不是很稳定,用一段时间过后就会获取不到数据了. 随笔地址:http://www.cnblogs.com/liangstudyhome/p/3700420.html 1.最近看到百度有个天气接口,拿来用了用,感觉挺好的,这里就说说这个接口了 百度提供天气预报查询接口API,可以根据经纬度/城市名查询天气情况. 接口说明 根据经纬度/城市名查询天气的结果 接口示例 http://api.map.baidu.com/telematics/v

使用WebService天气接口,自动获取天气,并定时写入数据库

因为我也是菜鸟,所以尽量写的简单些..... 1. 使用的天气接口为 http://www.webxml.com.cn/WebServices/WeatherWebService.asmx ,虽说是免费的,但是有使用次数限制 2. 开发使用的是VS2012 中的 C#控制台程序,开发时需要添加WEB引用,没错,地址就是上面的URL 3. 引用方法:右键项目 -> 添加服务引用 -> 左下角高级选项 -> 添加Web引用,如下图,URL为接口地址,Web引用名随你喜欢就填什么,我填的是We

天气接口 乱码问题

请求天气接口(http://wthrcdn.etouch.cn/weather_mini?citykey=101210101) 乱码问题 public static String sendGet2(String url) throws IOException { //实例化httpclient,(4.5新版本和以前不同),实例化方式有两种 CloseableHttpClient httpClient = HttpClients.createDefault(); HttpGet httpGet =