JSONP案例:腾讯天气

最新推荐文章于 2022-05-22 17:59:00 发布

一麻袋小猫

最新推荐文章于 2022-05-22 17:59:00 发布

阅读量326

点赞数

CC 4.0 BY-SA版权

分类专栏：同源政策解决方法 Ajax 文章标签： jsonp

本文链接：https://blog.youkuaiyun.com/Zmongo/article/details/105408145

Ajax 同时被 2 个专栏收录

17 篇文章

订阅专栏

同源政策解决方法

3 篇文章

订阅专栏

本文介绍了一种使用JSONP技术从腾讯天气API获取实时天气数据的方法，并展示了如何将这些数据动态地显示在一个HTML表格中。具体实现包括定义HTML结构、引入必要的库文件、编写日期格式化函数以及使用JSONP请求数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用jsonp获取腾讯天气信息</title>
	<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
	<style type="text/css">
		.container {
			padding-top: 60px;
		}
	</style>
</head>
<body>
	<div class="container">
		<table class="table table-striped table-hover" align="center" id="box"></table>
	</div>
	<script src="/js/jsonp.js"></script>
	<script src="/js/template-web.js"></script>
	<script type="text/html" id="tpl">
		<tr>
			<th>时间</th>
			<th>温度</th>
			<th>天气</th>
			<th>风向</th>
			<th>风力</th>
		</tr>
		{{each info}}
		<tr>
			<td>{{dateFormat($value.update_time)}}</td>
			<td>{{$value.degree}}</td>
			<td>{{$value.weather}}</td>
			<td>{{$value.wind_direction}}</td>
			<td>{{$value.wind_power}}</td>
		</tr>
		{{/each}}
	</script>
	<script>
		var box = document.getElementById('box');
		
		function dateFormat (date) {
			var year = date.substr(0, 4);
			var month = date.substr(4, 2);
			var day = date.substr(6, 2);
			var hour = date.substr(8, 2);
			return year + '年' + month + '月' + day + '日' + hour+'时';
		}
		//向模板中开放外部变量
		template.defaults.imports.dateFormat = dateFormat;

		jsonp({
			url: 'http://wis.qq.com/weather/common',
			data: {
				source: 'pc',
				weather_type: 'forecast_1h',
				province: '黑龙江省',
				city: '哈尔滨市'
			},
			success: function (data) {
				// console.log(data);
				var html = template('tpl', {info: data.data.forecast_1h});
				// console.log(html);
				box.innerHTML = html;
			}
		})
	</script>
</body>
</html>