ajax+template.js实现天气预报查询

最新推荐文章于 2024-04-22 15:07:14 发布

webshitian

最新推荐文章于 2024-04-22 15:07:14 发布

阅读量739

点赞数 1

分类专栏： web前端开发 jq

本文链接：https://blog.csdn.net/qq_42943107/article/details/91046654

版权

web前端开发同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

准备的文件如下：
template.js文件下载
链接：https://pan.baidu.com/s/1FOcJehGQCBfdi5fxIJjVnQ
提取码：62in
jquery-1.4.2.min.js文件
链接：https://pan.baidu.com/s/1jm8wELdaid0cGFgk66UiKA
提取码：6gvc
天气api接口
网站：https://www.kancloud.cn/ccjin/yingq/603579
接口链接：https://www.tianqiapi.com/api/

完整代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="template.js"></script>
		<script type="text/html" id="weatherTemplate">
			{{each data as value i}}
			<div>
				<span>日期：{{value.date}}</span>
				<ul>
					<li>星期：{{value.week}}</li>
					<li>天气情况：{{value.wea}}</li>
					<li>白天温度：{{value.tem1}}</li>
					<li>晚上温度：{{value.tem2}}</li>
				</ul>
			</div>
			{{/each}}
		
		</script>
		<script type="text/javascript">
			window.onload = function() {
				//得到我们的btn按钮
				var btn = document.querySelector("#btn");
				//响应我们按钮的点击事件
				btn.onclick = function() {
					//找到我们的输入框
					var keywordValue = document.querySelector("#city").value;
					console.log(keywordValue);
					//使用jQuery来获取跨域的数据
					$.ajax({
						url: "https://www.tianqiapi.com/api/",
						data: {
							city: keywordValue
						},
						success: function(data) {
							console.log(data);
						},
						dataType:"jsonp",
						jsonp:"callback",
						success: function(data) {
							console.log(data);
							var html = template("weatherTemplate", data); //将数据和模板结合起来
							$("#info").html(html);

						}
					});

				}
			}
		</script>
		<style type="text/css">
			#container {
				width: 400px;
				min-height: 300px;
				background-color: yellow;
				margin: auto;
				padding: 10px;
				text-align: center;
			}
			#sousou{
				margin: 20px 0px;
			}
			ul {
				list-style: none;
				text-align: left;
			}
		</style>
	</head>

	<body>
		<div id="container">
		<div id="sousou">
		<h1>天气信息查询</h1>
		<input type="text" id="city" placeholder="请输入城市名称" />
		<input type="button" id="btn" value="查询" />
		</div>
		<div id="info">
		 
		</div>
		</div>
	</body>

</html>

效果图：
未查询之前的效果：
在这里插入图片描述
查询之后的效果：

webshitian

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
ajax+template.js实现天气预报查询

准备的文件如下：template.js文件下载链接：https://pan.baidu.com/s/1FOcJehGQCBfdi5fxIJjVnQ提取码：62injquery-1.4.2.min.js文件链接：https://pan.baidu.com/s/1jm8wELdaid0cGFgk66UiKA提取码：6gvc天气api接口网站：https://www.kancloud.c...
复制链接

扫一扫