天气案例

最新推荐文章于 2022-04-24 17:08:05 发布

胖虎的沉思录

最新推荐文章于 2022-04-24 17:08:05 发布

阅读量542

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/orangesnow2017/article/details/77145941

ajax 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" value='去百度 获取天气预报'>
	<table id='weather'></table>
</body>
</html>

<script type="text/javascript" src='../js/template-native.js'></script>

<script type="text/template" id='template'>
	<%for(var i=0;i<weather_data.length;i++) {%>
		<tr>
			<td><%=weather_data[i].date%></td>
			<td><img src="<%=weather_data[i].dayPictureUrl%>" alt=""></td>
			<td><img src="<%=weather_data[i].nightPictureUrl%>" alt=""></td>
			<td><%=weather_data[i].temperature%></td>
			<td><%=weather_data[i].weather%></td>
			<td><%=weather_data[i].wind%></td>
		</tr>
	<% } %>
</script>

<script type="text/javascript" src='../js/jquery.min.js'></script>
<script type="text/javascript">
	$("input").click(function () {
		$.ajax({
			url:"http://api.map.baidu.com/telematics/v3/weather?location=上海&output=json&ak=tq0Kt0NFYheTCj5mszast0drkIqqVTNn",
			dataType:'jsonP',
			success:function(data){
				// 读取对象
				var weatherResults = data.results[0];

				// 读取模板
				var str = template('template',weatherResults);
				console.log(str);
				
				// 添加到界面上
				$("#weather").append(str);
			}
		})
	})
</script>

演示效果：