struts2 spring4 hibernate4（s2sh）整合开发--简单实体的增删改查操作
在前一篇博客的基础上，现在介绍一下对User这个实体的增删改查操作，其中后端的代码实现以及在UserAction中全部贴出来了，想要介绍的其实前端页面如何与后端（其实就是Action）交互。我采用的是企业比较实用的jquery ajax异步交互，特别是删除与批量删除，我觉得使用到的jquery比较实用！
回顾一下上篇博文，我登录采用的是jquery的post方法，后台action处理完毕会返回success，success有两个取值“yes”和“no”，当为yes的时候，响应user-main.action。可以见如下代码：
$(function(){
var serverUrl=$('#serverUrl').val();
$('#loginBtn').bind('click',function(){
//alert("登录");
var userName=$('#userName').val();
var password=$('#password').val();
//也就是说如果你dataType写的是json格式,jQuery在返回时已经把返回值转换成了json对象,
//这时就不需要再用eval转换了，如果dataType写的是text才需要用eval转换。
console.log(userName+" -- "+password);
$.post(serverUrl+"/user-login.action",{
userName:userName,
password:password
},function(result){
if (result.success=='yes') {
window.location.href=serverUrl+"/user-main.action";
} else {
window.location.href=serverUrl+"/index.jsp";
}
},"json");
});
});
这个jsp页面就是success.jsp，其源码如下：
<%@page import="com.steadyjack.server.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆成功</title>
<c:set value="${pageContext.request.contextPath}" var="ctx" />
<script type="text/javascript" src="${ctx}/style/js/common/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
//异步删除
$('.delete').click(function(){
//获取自定属性
var id=$(this).attr('data-option');
//当前的链接
var url=this.href;
//找到那条tr,以便后面动态删除
var $tr=$(this).parent().parent().parent();
//jquery的查找
var delName=$tr.children().eq(2).text();
console.log(id+" -- "+url+" -- "+delName);
if(confirm("是否删除用户名为: "+delName+" ?")){
$.post(url,{userId:id},function(requestData){
alert(requestData);
//动态删除这一行,而不会去整个刷新页面
$tr.remove();
});
}
//取消a href本身的超链接属性(不写的话或者忘记写的话,如果没注意,会很蛋疼)
return false;
});
//实现checkbox的全选与反选
$("#allAndNotAll").click(function() {
if (this.checked){
$("input[name='items']:checkbox").each(function(){
$(this).attr("checked", true);
});
} else {
$("input[name='items']:checkbox").each(function() {
$(this).attr("checked", false);
});
}
});
//批量删除
$('.batchDelete').live('click',function(){
var ids=[];
//获取被选中的checkbox,然后将其id塞进ids中
$("input[name='items']:checked").each(function(){
ids.push($(this).attr('data-option'));
});
//采用逗号隔开塞进ids的每个id
var delIds=ids.join(",");
//console.log(ids+" -- "+ids.length);
if(delIds.length==0){
alert('请选择需要删除的数据');
return false;
}
if(confirm('是否批量删除选中的数据?')){
var url=this.href;
console.log(delIds);
$.post(url,{delIds:delIds},function(requestData){
alert(requestData);
window.location.reload(true);
});
}
return false;
});
});
</script>
</head>
<%
User currUser=(User)request.getSession().getAttribute("currentUser");
if(currUser==null){
response.sendRedirect(request.getContextPath()+"/index.jsp");
}
%>
<body>
<input id="serverUrl" value="${ctx}" type='hidden'/>
<h2>登陆成功!!! 当前用户: ${currentUser.userName }</h2>
<a href="${ctx}/user-input.action" style="cursor: pointer;text-decoration: underline;">添加用户</a>
<a href="${ctx}/user-batchDelete.action" class="batchDelete" style="cursor: pointer;text-decoration: underline;">批量删除</a>
<br><br>
<table cellpadding="10px" cellspacing="0" border="1px solid #cdcdcd">
<thead>
<tr>
<td><input type="checkbox" id="allAndNotAll" /></td>
<td><label>编号 </label></td>
<td><label>姓名 </label></td>
<td><label>密码 </label></td>
<td><label>住址 </label></td>
<td><label>联系电话 </label></td>
<td><label>创建时间 </label></td>
<td><label>更新时间 </label></td>
<td><label>操作 </label></td>
</tr>
</thead>
<tbody id="itemBodyTemplate">
<c:forEach items="${userList}" var="user">
<tr>
<td><input type="checkbox" name="items" data-option="${user.id}"/></td>
<td><label>${user.id} </label></td>
<td><label id="currName">${user.userName} </label></td>
<td><label>${user.password} </label></td>
<td><label>${user.address} </label></td>
<td><label>${user.phoneNumber} </label></td>
<td><label>${user.createTime} </label></td>
<td><label>${user.updateTime} </label></td>
<td><label>
<a href="${ctx}/user-modify.action?userId=${user.id}" class="modify" style="cursor: pointer;text-decoration: underline;">修改</a>
<br>
<a href="${ctx}/user-delete.action" data-option="${user.id}" class="delete" style="cursor: pointer;text-decoration: underline;">删除</a>
</label></td>
</tr>
</c:forEach>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
上面jsp页面，已经给出了删除、批量删除的前端代码，其中涉及到的jquery ajax的知识还是不少的，好好研究一下还是对诸位博友是有好处的！！！
而“添加”跟“修改”功能的后端代码虽然不一样，但最终跳转的jsp页面是同一个的！即userInfo.jsp：
<%@page import="com.steadyjack.server.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改用户信息</title>
<c:set value="${pageContext.request.contextPath}" var="ctx" />
<script type="text/javascript" src="${ctx}/style/js/common/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#saveUser').bind('click',function(){
$('#userForm').submit();
});
});
</script>
</head>
<body>
<form action="${ctx}/user-save.action" id="userForm" method="post">
用户名:<input type="text" id="userName" name="user.userName" value="${modifyUser.userName}"/><br><br>
密码:<input type="text" id="password" name="user.password" value="${modifyUser.password}"/><br><br>
地址:<input type="text" id="address" name="user.address" value="${modifyUser.address}"/><br><br>
电话号码<input type="text" id="phoneNumber" name="user.phoneNumber" value="${modifyUser.phoneNumber}"/><br><br>
<input type="hidden" id="userId" name="user.id" value="${modifyUser.id}"/><br>
<input type="button" value="保存" id="saveUser"/>
</form>
</body>
</html>
其保存功能，我直接在js代码中提交表单了！
下面演示效果，点击“添加”：
用户名的唯一性我就没有做了，如果需要的话，可以到我的这篇博客 点击打开链接里面的UserController与相应的页面查看！！！！
点击“保存”，即可以在用户列表中查看到刚刚新添加的用户：
现在，将这条信息进行修改，点击“修改”：
都加上222，然后保存，即可以看到该信息以及被修改了！！！而且还更新了“更新时间”。
接下来我们多添加几条信息，以便于测试删除与批量删除功能。
下面，我们删除“jack2”这个用户名，删除过程会提示是否进行删除，删除成功之后会提示“删除成功”，并将该条数据动态移除：
点击“确定”：
最终的效果：
好了，先介绍到这里吧！
后面我已经想好了要练手什么功能了，在这里不妨提一条：分页、预览、图片的上传、批量导入导出、、、、、
扫一扫
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
