了解前后台交互--用户列表（下）+登录页面（上）

用户列表-js

代码如下：

<script type="text/javascript">
function showAddDiv(){
	$(".box").show();//显示div


	//document.getElementById("divId").style.display="block";
}

function edit(id){
	$.ajax({
		type:"get",
		url:"${ctx}/user/findById.do",
		data:{"id":id},
		success:function(data){
			$("#id").val(data.id);
			$("#username").val(data.username);
			$("#pwd").val(data.pwd);
			$("#realname").val(data.realname);
			$(".box").show();
		}
	});
}
function deleteUser(id){
	if(confirm("您确定要删除吗？")){
		$.post("${ctx}/user/delete.do",{"id":id,"username":id},
				function(data){
			if(data){
				alert("删除成功");
				window.location.reload();
			}else{
				alert("删除失敗");
			}	
		})
	}
}

//保存
function create(){
	$.post("${ctx}/user/create.do",
			$("#saveForm").serialize(),function(data){//form表单参数可以直接通过这种提交
				if(data){
					alert("保存成功");
					window.location.reload();
				}else{
					alert("失敗");
				}		
	});
}

</script>

登录界面

登录-HTML代码