第十二周学习周记——AJAX和天气预报

cjy1602

于 2021-06-18 15:09:48 发布

阅读量374

点赞数 1

分类专栏：我的HTML学习周记文章标签： jquery ajax html

本文链接：https://blog.csdn.net/cjy1602/article/details/118026412

版权

我的HTML学习周记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

第十二周学习周记AJAX和天气预报

前言
一、
二、添加Jquery事件、方法
三、HTML主体部分
四、效果
总结

前言

上一周我们初步学习了AJAX的概念，这一周我们可以利用AJAX接上网上的天气预报接口，尝试着做一个天气预报界面

一、

首先我们需要输入

document.addEventListener('plusready', function(){});

所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。

二、添加Jquery事件、方法

代码如下：

$(document).ready(function() {
			$("button").click(function() {
						var city = $("#city").val();
		            $.ajax({	 
		                type: "GET",	//请求方式	 
		                url: "http://wthrcdn.etouch.cn/weather_mini?city="+city,	
			dataType:"json",
			success:function(result){
				addBox(result.data.forecast);
			}
		});
			});
		});		
			
				
		function addBox(json_data) {
			
				$.each(json_data, function(index, obj) {
					
					$("#box").append("<div'>" +
						
							"<p>" + obj['date'] + "</p>" +
							
							
							"<p>" + obj['high'] + "</p>" +
							
							"<p>" + obj['fengli'] + "</p>" +
							
							"<p>" + obj['low'] + "</p>" +
							
							"<p>" + obj['fengxiang'] + "</p>" +
							
							"<p>" + obj['type'] + "</p>" +
							
							"</div>");
				});							
		}

三、HTML主体部分

代码如下（示例）：

<body>
	<div>
		<h3>请输入城市：</h3>
		城市：<input type="text" id="city"/>
		<br>
		<button type="button">提交</button>
	</div>
	
	<br>
	
	<div id="box"></div>	
	
</body>

四、效果

在这里插入图片描述

总结

这就是一个运用AJAX的示例

cjy1602

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
第十二周学习周记——AJAX和天气预报

第十二周学习周记AJAX和天气预报前言一、二、添加Jquery事件、方法三、HTML主体部分总结前言上一周我们初步学习了AJAX的概念，这一周我们可以利用AJAX接上网上的天气预报接口，尝试着做一个天气预报界面一、首先我们需要输入document.addEventListener('plusready', function(){}); 所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。二、添加Jquery事件、方法代码如下：$(docume
复制链接

扫一扫