了解前后台交互--4.2的课程

接上节课的代码，启动数据库shop
1、用户列表-弹出新增框html，在user.jsp里加入以下代码

<div class="box">
	<div id="loginDiv">
	    <p class="logTitle">新增</p>
	    <div>
	      <form id="saveForm" >
		      	<input type="hidden" name="id" id="id"	/>
		        <div class="formInput"> <span>用户名：</span>
		          <input type="text" name="username" id="username"	placeholder="" />
		        </div>
		        <div class="formInput"> <span>密码：</span>
		          <input type="password" name="pwd"	id="pwd"	placeholder="" />
		        </div>
		        <div class="formInput"> <span>真实姓名：</span>
		          <input type="text"	name="realname" id="realname"	placeholder="" />
		        </div>
		        <div class="formInput"> <span>性别：</span>
		          <select name="sex">
		            <option value="1">男</option>
		            <option value="2">女</option>
		          </select>
		        </div>
		        <div class="formInput"> 
		        	<span>角色：</span>
			          <select name="role">
			          	<option value="1">管理员</option>
			            <option value="2">客户</option>
			          </select>
		         </div> 
		          <input  class="formButton" type="button" value="保存" onClick="create()" />
		      	</form>
	    	</div>
		</div>
	</div>

2、在user.jsp的head里引用以下代码实现点击新增弹出div

<link href ="${ctx }/css/public.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function showAddDiv(){
	$(".box").show();//显示div
	//document.getElementById("divId").style.display="block";
}
</script>

3、实现点击新增页面中的保存按钮弹出对话框保存成功或者失败
在user.jsp中加入以下代码

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

4、实现删除用户
同样在user.jsp中加入代码

function deleteUser(id){
	if(confirm("你确定要删除吗？")){
		$.post("${ctx}/user/delete.do",{"id":id,"username":id},
				function(data){
					if(data){
						alert("删除成功！");
						window.location.reload();
					}else{
						alert("删除失败！");
					}
		});
	}
}

在UserController 里加入以下代码

@ResponseBody
	@RequestMapping("/delete.do")
	public boolean delete(Integer id){
		try{
			userService.delete(id);
		}catch(Exception e){
			System.out.println(e.getMessage());
			return false;
		}
		return true;
	}

注意：在UserController里写了代码要重新运行，不然执行不出来

5、接下来实现编辑功能
在userServiceImpl中添加findById方法

public User findById(Integer id) {
		return userDao.findById(id);
	}

根据提示的错误更改
在user.jsp中加入代码

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();
		}
	})
}

在userController添加代码实现编辑功能

实现根据id查找

@ResponseBody
	@RequestMapping("/finById.do")
	public User findById(Integer id){
		return userService.findById(id);
	}

6、结束