第十一周学习周记——初学AJAX

最新推荐文章于 2024-09-23 21:01:32 发布

原创最新推荐文章于 2024-09-23 21:01:32 发布 · 481 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

学习

这篇博客记录了作者第十一周的学习周记，主要介绍了AJAX的基础知识和工作原理，并通过实现天气预报功能展示了AJAX的应用。作者强调了AJAX在不刷新页面的情况下更新内容的优势，并计划在接下来的学习中深入研究。

第十一周学习周记

前言
一、AJAX简介
二、AJAX工作原理
三、天气预报
- 1. 代码
- 2. 运行结果
总结

前言

上一周通过三个实验巩固了JSON，这一周将学习新的知识：AJAX。

一、AJAX简介

AJAX=Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种使用现有标准的新方法，其最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

二、AJAX工作原理

AJAX工作原理

三、天气预报

1. 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
   		document.addEventListener('plusready', function(){
   		});  

		$(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>");
				});							
		}
    </script>
	
</head>
<body>
	<div>
		<h3>请输入城市：</h3>
		城市：<input type="text" id="city"/>
		<br>
		<button type="button">提交</button>
	</div>	
	<br>	
	<div id="box"></div>	
	
</body>
</html>