电商项目开发--2

1. 用户列表-弹出新增框html

更新 user.jsp

在body里加入如下代码：

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

在head内写入如下代码 

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

 点击新增页面如下：

 新增表单中，点击保存 响应create方法

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

例如： 

 

 点击删除

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.java:

@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;
		
	}

例如 删除xianbei: 

 删除成功！

 编辑：

userService.java

 public User findById(Integer id);

userServiceImpl.java  中 会自动生成

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

user.jsp

扫描二维码关注公众号，回复： 6173963 查看本文章

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.java: 

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