学习周记11

最新推荐文章于 2023-05-07 22:41:03 发布

顾影留声

最新推荐文章于 2023-05-07 22:41:03 发布

阅读量106

点赞数

本文链接：https://blog.csdn.net/Lowy_a/article/details/118034365

版权

AJAX

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
在这里插入图片描述

AJAX实例

在这里插入图片描述

点击修改内容后：

课程天气系统设计

< !DOCTYPE html >
< html >
< head >
< meta charset=“utf-8” / >
< title >城市天气系统< /title >
< script src=“https://cdn.xxxxx/jquery/1.10.2/jquery.min.js”>

	<script>
              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>

顾影留声

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记11

AJAXAJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。AJAX实例点击修改内容后：课程天气系统设计< !DOCTYPE html >< html >< head >< meta charset=“utf-8” / >< title >城
复制链接

扫一扫