AJAX实验例题操作——学习周记11_jquery ajax天气预报查询实验心得-CSDN博客

本文链接：https://blog.csdn.net/weixin_54919878/article/details/116752878

AJAX实验例题

实例1
实例2-天气预报

实例1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
	<div class="search">
		<input type="text" name="city" id="city" placeholder="请输入查询天气的城市" />
	</div>
<h2>北京天气预报</h2>
		<p>最高气温：<span id="high1"></span></p>
		<p>风力：<span id="fengli1"></span></p>
		<p>最低气温：<span id="low1"></span></p>
		<p>风向：<span id="fengxiang1"></span></p>
		<p>天气：<span id="type1"></span></p>

<script>
var sites = [
	{"date":"13日星期四","high":"高温 26℃","fengli":"<![CDATA[2级]]>","low":"低温 16℃","fengxiang":"东南风","type":"多云"},
	{"date":"14日星期五","high":"高温 28℃","fengli":"<![CDATA[2级]]>","low":"低温 19℃","fengxiang":"东南风","type":"多云"},
	{"date":"15日星期六","high":"高温 24℃","fengli":"<![CDATA[3级]]>","low":"低温 14℃","fengxiang":"东北风","type":"小雨"},
	{"date":"16日星期天","high":"高温 25℃","fengli":"<![CDATA[2级]]>","low":"低温 15℃","fengxiang":"北风","type":"多云"},
	{"date":"17日星期一","high":"高温 28℃","fengli":"<![CDATA[2级]]>","low":"低温 14℃","fengxiang":"北风","type":"晴"},
];

document.getElementById("high1").innerHTML=sites[0].high;
document.getElementById("fengli1").innerHTML=sites[0].fengli;
document.getElementById("low1").innerHTML=sites[0].low;
document.getElementById("fengxiang1").innerHTML=sites[0].fengxiang;
document.getElementById("type1").innerHTML=sites[0].type;

</script>

</body>
</html>

在这里插入图片描述

实例2-天气预报

<!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();
				$.ajax({
					type:"GET",
					url:"http://wthrcdn.etouch.cn/weather_mini?city="+city,
					dataType:"json",
					success:function(result){
						addBox(result.data.forecast);
					}
				})	
				
		/*-----------------------------------begin--------------------------------*/
		/*------说明：通过ajax获取远程服务器（url:http://wthrcdn.etouch.cn/weather_mini?city=）天气信息（json数据），解析获取的字条串，
		转化成为对象，获取forecast数组，调用addBox（）函数---------*/
	
		/*-----------------------------------end--------------------------------*/		
			});
		});					
		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>
		<br>
		<button type="button">提交</button>
	</div>
	<br>
	<div id="box"></div>	
</body>
</html>