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

//跨域请求天气地址
			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);
				}
				
		 
				
		 });
原文地址:https://www.cnblogs.com/hzy168/p/6703232.html