AJAX、jQuery调用第三方平台数据实现天气预报小案例

最新推荐文章于 2024-07-23 20:21:33 发布

繁花&遇见

最新推荐文章于 2024-07-23 20:21:33 发布

阅读量951

点赞数

文章标签： ajax jquery js

本文链接：https://blog.csdn.net/weixin_40292154/article/details/105978150

版权

这个案例使用了art-template模板引擎，事先需准备好template-web.js文件

效果图
数据较多，这里只显示部分数据效果

代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容 -->
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>全国天气预报</title>
		<style type="text/css">
			li {
				list-style: none;
			}

			.wrap {
				width: 25rem;
				height: auto;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				background-color: skyblue;
			}

			.header {
				margin-bottom: 0.625rem;
				padding-bottom: 0.3125rem;
				border-bottom: 1px solid #eee;
			}

			.headerText {
				text-align: center;
				font-size: 26px;
			}

			.inp-btn {
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-bottom: 0.625rem;
			}

			.get {
				width: 15.625rem;
				height: 1.5625rem;
				border: 1px solid #fff;
				border-radius: 20px;
				box-shadow: none;
				text-align: center;
				background-color: #fff
			}

			#getCity {
				width: 100%;
				height: 100%;
				border: none;
				background: none;
				padding-left: 15px;
				outline: none;
			}

			.get-btn {
				border: 1px solid #fff;
				width: 3.125rem;
				border-radius: 10px;
				outline: none;
				margin-left: 20px;
			}

			.lists {
				background-color: #e0e0ec;
			}
		</style>
		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="template-web.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			jQuery(document).ready(function() {
				// 按回车键获取到文本框的值
				getData()
				$('#getCity').on('keydown', function(e) {
					if (e.keyCode == 13) {
						var param = $(this).val();
						// console.log(param);
						getData(param)
					}
				});
				//点击查询按钮
				$('#btn').on('click',function(){
					var value = $('#getCity').val();
					getData(value);
				})

				function getData(param) {
					var param = param ? param : "北京";
					$.ajax({
						type: 'get',
						url: 'http://api.tianapi.com/txapi/tianqi/index',
						data: {
							key: "",//第三方平台数据的apikey
							city: param
						},
						// dataType:'jsonp',
						success: function(res) {
							console.log(res.newslist);
							var html = template('temp', res);
							$('#ulLists').html(html);
						}
					})
				}
			})
		</script>
	</head>
	<body>
		<div class="wrap">
			<div class="header">
				<p class="headerText">全国城市天气查询</p>
			</div>
			<div class="inp-btn">
				<div class="get">
					<input type="text" placeholder="请输入城市名称" id="getCity">
				</div>
				<button type="button" id="btn" class="get-btn">查询</button>
			</div>
			<div class="lists">
				<ul id="ulLists">
					<script type="text/html" id="temp">
						<li>
							<h3>城市: {{newslist[0].area}}</h3>
						</li>
						{{each newslist}}
							<li>
							    <h3>日期: {{$value.date}}</h3>
							</li>
							<li>
							    <h3>星期: {{$value.week}}</h3>
							</li>
							<li>
							    <h3>早晚天气变化: {{$value.weather}}</h3>
							</li>
							<li>
							    <h3>实时天气: {{$value.real}}</h3>
							</li>
							<li>
							    <h3>最低温: {{$value.lowest}}</h3>
							</li>
							<li>
							    <h3>最高温: {{$value.highest}}</h3>
							</li>
							<li>
							    <h3>风向: {{$value.wind}}</h3>
							</li>
							<li>
							    <h3>风速: {{$value.windspeed}}</h3>
							</li>
							<li>
							    <h3>风力: {{$value.windsc}}</h3>
							</li>
							<li>
							    <h3>日出时间: {{$value.sunrise}}</h3>
							</li>
							<li>
							    <h3>日落时间: {{$value.sunset}}</h3>
							</li>
							<li>
							    <h3>月升时间: {{$value.moonrise}}</h3>
							</li>
							<li>
							    <h3>月落时间: {{$value.moondown}}</h3>
							</li>
							<li>
							    <h3>降雨量: {{$value.pcpn}}</h3>
							</li>
							<li>
							    <h3>降雨概率: {{$value.pop}}</h3>
							</li>
							<li>
							    <h3>紫外线强度指数: {{$value.uv_index}}</h3>
							</li>
							<li>
							    <h3>能见度,单位:公里: {{$value.vis}}</h3>
							</li>
		 					<li>
							    <h3>相对湿度: {{$value.humidity}}</h3>
							</li>
							<li>
							    <h3>生活指数提示: {{$value.tips}}</h3>
							</li>
						{{/each}}
		            </script>
				</ul>
			</div>
		</div>
	</body>
</html>

这里需要注意的是，调用第三方平台数据是跨域请求，一般情况下，进行跨域请求需要在$.ajax()方法中声明 dataType:'jsonp'，否则无法向服务端请求数据。但如果服务端允许跨域请求 header('Access-Control-Allow-Origin: *'); 也就是跨域资源共享CORS，则不需要在客户端 $.ajax()方法中声明 dataType:'jsonp

繁花&遇见

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
AJAX、jQuery调用第三方平台数据实现天气预报小案例

这个案例使用了art-template模板引擎，事先需准备好template-web.js文件效果图数据较多，这里只显示部分数据效果代码部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=dev...
复制链接

扫一扫