AJAX、jQuery、Bootstrap调用第三方接口数据实现响应式的天气预报小案例

最新推荐文章于 2024-04-15 11:29:23 发布

繁花&遇见

最新推荐文章于 2024-04-15 11:29:23 发布

阅读量1.1k

点赞数 1

文章标签： bootstrap jquery js ajax

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

版权

事先需引入art-template模板引擎 template-web.js和进度条插件 NProgress.js

效果
在这里插入图片描述

相关代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="nprogress.css"/>
		<style type="text/css">
			.con {
				height: 6.25rem;
				background-color: skyblue;
				border-bottom: 2px solid #e0e0e0;
				text-align: center;
			}

			.con-header {
				font-size: 40px;
			}

			.inp {
				height: 6.25rem;
				background-color: skyblue;
				display: flex;
				align-items: center;
			}

			.form-control:focus {
				outline: none;
			}

			.btn:focus {
				outline: none;
			}

			.con-lists {
				background-color: #E0E0EC;
			}

			li {
				list-style: none;
			}
		</style>
		<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="template-web.js" type="text/javascript" charset="utf-8"></script>
		<script src="nprogress.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function($) {
				$(document)
					.ajaxStart(function(){
						NProgress.start();
					})
					.ajaxStop(function(){
						NProgress.done();
					});
				// 按回车键获取到文本框的值
				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',
						// jsonp:'callback',
						success: function(res) {
							console.log(res.newslist);
							var html = template('temp', res);
							$('#ulLists').html(html);
						}
					})
				}
			})
		</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-12 con">
					<span class="con-header">全国天气预报</span>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-md-12 inp">
					<div class="col-md-6 col-md-offset-3 col-xs-offset-3 col-sm-offset-3">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="请输入城市名称" id="getCity" />
							<span class="input-group-btn">
								<button class="btn btn-default" type="button" id="btn">查询</button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-12 col-md-12 con-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>
		</div>
	</body>
</html>

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

繁花&遇见

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
AJAX、jQuery、Bootstrap调用第三方接口数据实现响应式的天气预报小案例

事先需引入art-template模板引擎 template-web.js和进度条插件 NProgress.js效果相关代码<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8"> <title></title> <link ...
复制链接

扫一扫