026-ajax案例

最新推荐文章于 2024-09-14 07:37:02 发布

weixin_45615613

最新推荐文章于 2024-09-14 07:37:02 发布

阅读量128

点赞数

本文链接：https://blog.csdn.net/weixin_45615613/article/details/102956406

版权

天气查询

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>天气查询</title>
	<style type="text/css">
		#box1 {
			width: 400px;
			min-height: 200px;
			background-color: plum;
			margin: auto;
			padding: 10px;
			text-align: center;
		}
		li {
			list-style: none;
		}
	</style>
	<script src="jquery-3.3.1.js"></script>
	<script>
		$(function() {
			$('#btn').click(function() {
				var city = $('#city').val();
				$.ajax({
					type:'get',
					url:'http://wthrcdn.etouch.cn/weather_mini',
					// ?city=北京
					data:{city:city},
					// jsonp:'_jsonp',
					dataType:'jsonp',
					// jsonCallback:'abc',
					success:function(data) {
						var tag = '';
						var w = data.data.forecast;
						$.each(w,function(i,e){
							var date = e.date;
							var high =e.high ;
							var low =e.low ;
							var fengxiang =e.fengxiang;
							var fengli =e.fengli;

							tag +=
								"<li>日期" +date+"<li/>"+ 
								"<li>最高温度" +high+"<li/>"+ 
								"<li>最低温度" +low+"<li/>"+ 
								"<li>风向" +fengxiang+"<li/>"+ 
								"<li>风力" +fengli+"<li/>"; 
						})
						tag += "</ul>";
						$('#info').html(tag);
					}
				})
			})
		})
	</script>
</head>
<body>
	<div id="box1">
		<!-- <select id="city">
			<option value="">北京</option>
			<option value="">上海</option>
			<option value="">广州</option>
			<option value="">深圳</option>
		</select> -->
		<input type="text" id="city">
		<input type="button" value="查询" id="btn">
		<div id="info"></div>
	</div>
</body>
</html>