天气预报的网页HTML

2021-05-20 14:01:53 阅读：117 来源： 互联网

标签：function city obj addBox json HTML 网页天气预报 data

实验三：输入城市，查找该城市的天气

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
		document.addEventListener('plusready', function(){
			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
			
		});  
		/*----------Jquery事件--------------*/
		$(document).ready(function(){
			$("button").click(function(){
		/*-----------------------------------begin--------------------------------*/
		/*------说明：通过ajax获取远程服务器（url:http://wthrcdn.etouch.cn/weather_mini?city=）天气信息（json数据），解析获取的字条串，
		转化成为对象，获取forecast数组，调用addBox（）函数---------*/
				var city = $("#city").val();
				$.ajax({
					type:"GET",url:"http://wthrcdn.etouch.cn/weather_mini?city="+city,
					dataType:"json",
					success:function(result){
						addBox(result.data.forecast);
					}
				});
			});
			});
			
	function addBox(json_data) {
					$.each(json_data, function(index, obj) {
						
						$("#box").append("<div'>" +
							
								"<p>" + obj['date'] + "</p>" +
								
								"<p>" + obj['high'] + "</p>" +
								
								"<p>" + obj['fengli'] + "</p>" +
								
								"<p>" + obj['low'] + "</p>" +
								
								"<p>" + obj['fengxiang'] + "</p>" +
								
								"<p>" + obj['type'] + "</p>" +
								
								"</div>");
					});							
			}
	    </script>
		
	</head>
	<body>
		<div>
			<h3>请输入城市：</h3>
			城市：<input type="text" id="city"/>
			<br>
			<button type="button">提交</button>
		</div>
		
		<br>
		
		<div id="box"></div>	
		
	</body>
	</html>

浏览器显示如下：
在这里插入图片描述
输入扬州，点击提交：

标签：function,city,obj,addBox,json,HTML,网页,天气预报,data
来源： https://blog.csdn.net/qq_48999927/article/details/117073620

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

天气预报的网页HTML

实验三：输入城市，查找该城市的天气