Ajax异步传输

最新推荐文章于 2022-08-05 09:52:57 发布

疯狂小王子

最新推荐文章于 2022-08-05 09:52:57 发布

阅读量362

点赞数

分类专栏： ajax 文章标签： json ajax

本文链接：https://blog.csdn.net/yelang0111/article/details/76647365

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通俗的说就是有时候我们只需要更新一个页面的一部分数据不需要更新全部数据，这个时候我们就能使用ajax了，它就是为了完成这个功能的。

1，ajax我们这里讲的是注重实际的应用，从举例开始：

比如我们想从项目的json文件里读取json数据，

首先在html页面里：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js">
		</script>
		<script type="text/javascript" src="js/json.js" defer="defer">
		</script>
	</head>
	<body>
		<ul id="menu"></ul>
	</body>
</html>

json文件里的数据：

[	{"text":"菜单一",
		"child":[
		{"text":"子菜单1","url":"地址1"},
		{"text":"子菜单2","url":"地址1"},
		{"text":"子菜单3","url":"地址1"}
		]
	},
	{"text":"菜单er",
		"child":[
		{"text":"子菜单21","url":"地址2"},
		{"text":"子菜单23","url":"地址2"},
		{"text":"子菜单24","url":"地址2"}
		]
	},
	{"text":"菜单三",
		"child":[
		{"text":"子菜单31","url":"地址3"},
		{"text":"子菜单32","url":"地址3"},
		{"text":"子菜单33","url":"地址3"}
		]
	}


]

这里我们用到jQuery和ajax，在js里的代码：

$(document).ready(function(){
	$.ajax({
		url:"dates/data.json",
		success:function(rs){
			$.each(rs, function(i,n) {
				$("#menu").append($("<li id='L"+i+"'>"+n.text+"<ul></ul></li>"));
			});
				$("#menu li").click(function(){					
				    var id=this.id;
				    var txt=this.innerText.trim();
				    $.ajax({
				    	url:"dates/data.json",
				    	success:function(rs){
				    		$.each(rs, function(i,n) {
				    			if (n.text.trim()==txt) {
				    				$.each(n.child,function(j,m) {
				    					$("#"+id+" ul").append($("<li></li>").html("<a href='"+m.url+"'>"+m.text+"</a>"));
				    				});
				    			}
				    		});
				    	}
				    });
			});
		}
	});	
});

注意html页面里要引用jQuery和自己写js文件。

下面是下载链接：