一个基于jQuery ajax的天气预报小应用

1 篇文章 0 订阅
作者:旺仔
   这段时间又忙里投了个闲,准备搞点东西玩玩,正好这几天在网上查有没有免费的实时公交接口,发现这些接口都是收费的,因为禳中羞涩,所以还是放弃了,正好同事说他知道一个免费的天气预报api还挺好玩的,便要来玩一玩,做了一个天气预报的小应用 ,下面是代码,简单易懂:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
<style>
	p,ul{margin: 0;padding: 0;}
	.div{
		width: 50%;
		height: 640px;
		margin:0 auto;
		border: 1px solid #f1f1f1;
	}
	.div h1{
		width: 100%;
		height: 50px;
		background: #f1f1f1;
		line-height: 50px;
		font-size: 23px;
		text-indent: 1.5em;
	}
	.div h1 select{
		float: right;
		margin-top: 17px;
	}
	.div h1>span{
		font-size: 13px;
		color: #3a3939;
	}
	.div .body p{
		width: 50%;
	    float: left;
	    margin: 10px 0 10px 0;
	    text-indent: 2em;
	}
	.div p:last-child{
		width: 100%;
        float: left;
	}
	.body{
		overflow:hidden;
	}
	.forword h2{
		width: 100%;
		height: 50px;
		background: #f1f1f1;
		line-height: 50px;
		font-size: 23px;
		text-indent: 1.5em;
	}
	.forword p{
		width: 100%;
		height: 50px;
		display: flex;
	}
	.forword p span{
		flex: 1;
		text-align: center;
		line-height: 50px;
		border:1px solid #dddddd;
	}
	.forword h2{
		width: 100%;
		height: 50px;
	}
	.forword li{
		width: 100%;
		height: 50px;
		display: flex;
	}
	.forword li span{
		flex: 1;
		text-align: center;
		line-height: 50px;
		border:1px solid #dddddd;
	}
</style>
	<body>
			<div class="div">
				<h1>最新天气实况<span>日期:<span></span></span><select id="select_city"><option>南京</option><option>蚌埠</option><option>南通</option></select></h1>
				<div class="body">
					<p>城市:<span></span></p>
					<p>天气:<span></span></p>
					<p>当前气温:<span></span></p>
					<p>风向:<span></span></p>
					<p>最高气温:<span></span></p>
					<p>最低气温:<span></span></p>
					<p>温馨提醒:<span></span></p>
				</div>
				<div class="forword">
					<h2>未来五天天气预报</h2>
					<p><span>日期</span><span>天气</span><span>最高气温</span><span>风力</span><span>最低气温</span><span>风向</span></p>
					<ul>
						<!--<li><span>16日</span><span>20℃</span><span>3-4级</span><span>20℃</span><span>东南</span></li>-->
					</ul>
				</div>
			</div>
		<script src="../jquery-1.11.2.min.js"></script>
		<script>
                $("#select_city").change(function(){
                	switch ($(this).val()){
                		case "南京":
                	     citykey_val="101190101";
                	     break;
                	    case "蚌埠":
                	     citykey_val="101220201";
                	     break; 
                	     case "南通":
                	       citykey_val="101190501";
                	     break; 
                	};
                	$.ajax({
						url: 'http://wthrcdn.etouch.cn/weather_mini',
						type: 'get',
						data: {
							citykey:citykey_val
						},
				dataType: 'json',
				success: function (resp) {
					console.log(resp);
					var date_data=resp.data.forecast[0].date;
					var data_len=date_data.substr(0,3);
					var data_len_day=date_data.substr(3,3);
					console.log(data_len_day);
					var date1=new Date();
					var dateMon=date1.getMonth()+1;
					var dateDay=date1.getDay();
					$(".div h1 span span").html(dateMon+'月'+data_len+" "+data_len_day);
					$('.body p:first-child span').html(resp.data.city);
					$('.body p:nth-child(2) span').html(resp.data.forecast[0].type);
					$('.body p:nth-child(3) span').html(resp.data.wendu+"℃");
					$('.body p:nth-child(4) span').html(resp.data.forecast[0].fengxiang);
				    $('.body p:nth-child(5) span').html(resp.data.forecast[0].high);
					$('.body p:nth-child(6) span').html(resp.data.forecast[0].low);
					$('.body p:nth-child(7) span').html(resp.data.ganmao);
					$('.forword ul').empty();
					for(var i=0;i<resp.data.forecast.length;i++){
					var str = resp.data.forecast[i].fengli;
					var str_fengli=str.substring(9, str.length - 3)
						var forword_day="<li><span>"+dateMon+'月'+resp.data.forecast[i].date+"</span><span>"+resp.data.forecast[i].type+"</span><span>"+resp.data.forecast[i].high+"</span><span>"+str_fengli+"</span><span>"+resp.data.forecast[i].low+"</span><span>"+resp.data.forecast[i].fengxiang+"</span></li>";
						$('.forword ul').append(forword_day);
					}
				}
	        })
           })
                $('#select_city').change();
			</script>
	</body>
</html>


这里是界面:

这里感谢这位无私将自己api公布与众的好人,虽然我并不知道你是谁;
欢迎各位大神交流经验~
  • 10
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
引用\[1\]和\[2\]中的代码是使用jQueryajax方法来获取天气预报信息的示例代码。这段代码通过发送GET请求到指定的API接口,传递城市参数,然后获取返回的天气数据。在成功获取数据后,将数据显示在页面上。具体的实现过程如下: 1. 首先,需要引入jQuery库和相关的插件,确保页面中有这些库的引用。 2. 在页面中添加一个文本框和一个按钮,用于输入城市名称和触发获取天气预报的操作。 3. 使用jQueryajax方法,在按钮点击事件中发送GET请求到天气预报API接口。请求的URL和参数需要根据具体的API接口来设置。 4. 在成功获取数据后,可以通过回调函数来处理返回的数据。可以根据返回的数据格式来解析和显示天气信息。 需要注意的是,这段代码中使用了jsonp的数据类型,这是因为在跨域请求时,使用jsonp可以绕过浏览器的同源策略限制。同时,还需要设置jsonpCallback参数,指定回调函数的名称。 总结起来,这段代码使用了jQueryajax方法来实现天气预报功能,通过发送GET请求获取天气数据,并将数据显示在页面上。具体的实现过程需要根据具体的API接口和数据格式来进行调整。 #### 引用[.reference_title] - *1* *3* [Ajax jQuery 安装 &天气预报 关键字查询 自动填充 等功能](https://blog.csdn.net/BADReamer/article/details/109879242)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Jquery+ajax 天气预报实例](https://blog.csdn.net/u011090104/article/details/103005325)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值