异步编程之回调

JS异步简单实现+后台接口

$(function() {
		//查詢功能,jquery语法，进入页面后自动执行
		find();
		function find() {
			$.post("stu.do", {"type":"findAjax"}, back, "Json");
			//接口，{参数类型}，回调函数，返回数据类型
			function back(data) {
				//alert(data);
				data = JSON.parse(data);
				//alert("zzz");
				//alert(data);
				//清除所有,只保留第一行
	
				$("table tr").not("tr:first").remove();
				for (var i = 0; i < data.length; i++) {
					//1.创建节点
					var $node = $("<tr><td>"
							+ data[i]["stuId"]
							+ "</td><td>"
							+ data[i]["stuName"]
							+ "</td><td>"
							+ data[i]["stuAge"]
							+ "</td><td>"
							+ data[i]["stuSex"]
							+ "</td><td>"
							+ data[i]["classinfo"]["className"]
							+ "</td><td><a href='stu.do?type=findById&stuId="+ data[i]["stuId"]+"'>编辑</a>"
							+"  "+"<a class='del'  stuId='"+data[i]["stuId"]+"'>删除</a></td></tr>"
							//给标签加入自定义属性
					);
					//alert($(this).attr("stuId"));
					$("table").append($node);//添加结点
				}
			}
		}
		//alert(JSON.parse($(this).attr("stuId")));
		$(".del").live("click",function(){
			if (confirm("是否删除？")) {
				var stuId = $(this).attr("stuId");
				alert(stuId);
				$.post("stu.do", {
					"type" : "ajaxdel",
					"stuId" : stuId
				}, back, "Json");
				function back(data) {
					find();
				}
			}
		});
	});
	

效果呈现，样式省略