随堂练习--北京天气查询

代码如下:

<!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(){
				var city=$("#city").val();
		/*-----------------------------------begin--------------------------------*/
		/*------说明:通过ajax获取远程服务器(url:http://wthrcdn.etouch.cn/weather_mini?city=)天气信息(json数据),解析获取的字条串,
		转化成为对象,获取forecast数组,调用addBox()函数---------*/
		
		$.ajax({
		                 type: "GET", //请求方式  
		                 url: "http://wthrcdn.etouch.cn/weather_mini?city="+city,//url地址,就是json文件的路径  
		                 dataType: "json", //数据类型,可以是 text xml json  script  jsonp  
		          success: function(result){ //result是响应信息返回的结果,此处包含了返回的json对象  
		                     addBox(result.data.forecast);  //调用addBox函数,将result数据添加到box容器中
		                 }  
		             });
		  
		   });	
			});
		
			
				
		function addBox(result) {
			
				$.each(result, 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>	<h1>请输入城市</h1>
		城市:<input type="text" id="city"/>
		<br />
		<button type="button">提交</button>
		</div>	
		<div id="box"></div>
	</body>
</html>

运行结果如下:
随堂练习--北京天气查询

上一篇:jQuery实现级联查询


下一篇:删除数据