初入职场，在这程序员一抓一大把的时代，要生存，就要什么都要学一点，什么都要会一点。在java世界里目前充斥着各种框架，struts，spring……但究其根本还是离不开servlet，故鄙人从java最基础的servlet入手，研究如何不用框架但又利用框架的优势实现最简单的用户管理，这里使用到了ajax技术实现完全不刷新，主要是为了改善用户体验，对于ajax也是老生常谈的东西，这里就不多介绍，下文会具体讲解用法，好了，闲话休提，言归正传！
-
开发环境
eclipse+tomcat6.0+mysql
-
工程目录
-
需要的jar包说明
1、用于java中JSON数据操作的有：
2、用于连接数据库
3、前台页面jsp标签
-
后台实现
具体如何增删改查的代码就不贴了，具体见附件，贴上关键的servlet，如下：
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String method = StringUtil.toLowerUpperCase(request.getParameter("method"),0);
if("toadd".equals(method)){//去用户添加页面
toAddUser(request, response);
}
else if("add".equals(method)) {//添加用户
addUser(request,response);
}
else if("toupdate".equals(method)){
toUpdateUser(request,response);
}
else if ("update".equals(method)) {
updateUser(request,response);
}
else if ("delete".equals(method)) {
deleteUser(request,response);
}
else if("list".equals(method)){
getJsonData(request, response);
}
else if("logout".equals(method)){
logout(request,response);
}
else {
listUser(request, response);
}
}在doPost方法中通过从前台获取的参数method判断将调用的方法，如URL地址为http://localhost:8080/myWeb-app/UserAction?method=toupdate为去修改用户页面，下面列出对应方法toUpdateUser(request,response)的实现：
/**
* 去修改用户页面
*
* @param request
* httpRequest对象
* @return
*/
private void toUpdateUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
try {
String strId = req.getParameter("id");
req.setAttribute("user", userService.findUserById(strId));
req.setAttribute("pageIndex", req.getParameter("pageIndex"));//得到当前页
req.setAttribute("roles", roleService.getRoles());
req.getRequestDispatcher("UserManage/user-edit.jsp").forward(req, resp);
} catch (Exception e) {
//e.printStackTrace();
req.setAttribute("errorMsg", e.getMessage());
req.getRequestDispatcher("error.jsp").forward(req, resp);
}
}strId为从前台获取的待修改用户id，然后查询到该用户放到user中返回前台，其中pageIndex用于分页，roles表示用户角色，然后回发到前台修改页面：user-edit.jsp。
然后我们来到修改用户的方法，updateUser(request,response)，如下代码：
/**
* 修改用户
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
private void updateUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
Map<String,Object> map=new HashMap<String,Object>();
try {
User user=new User();
user.setUserId(StringUtil.toInteger(req.getParameter("userId")));
user.setUserName(req.getParameter("userName"));
user.setRoleId(StringUtil.toInteger(req.getParameter("roleId")));
user.setBirth(DateUtils.strToDate(req.getParameter("birth")));
if(userService.updateUser(user))
map.put(Constants.RESULT_CODE, Constants.RESULT_CODE_SUCCESS);
else
map.put(Constants.RESULT_CODE, Constants.RESULT_CODE_FAILURE);
} catch (Exception e) {
//e.printStackTrace();
map.put(Constants.RESULT_CODE, Constants.RESULT_CODE_ERROR);
HTTPUtil.setSessionAttribute(req, Constants.ERROR_MSG, e.getMessage());
}
resp.getWriter().print(JSONUtil.mapToJson(map));
}注意这里使用到了Java的插件（需要的jar包我也会给予下载）实现map转JSON数据，就是方法JSONUtil.mapToJson(map));具体的见后面源代码附件，这里如果修改成功会打印JSON数据{result_code:"1"}，失败会打印{result_code,"0"}，这个在前台ajax中获取，具体js代码如下：
//使用ajax 提交数据
$.ajax({
type:'GET',
contentType : 'application/json',
url : $('#userForm').attr("action"),
data:{userId:$('#userId').val(),userName:$('#userName').val(),birth:$('#birth').val(),roleId:$('#roleId').val(),pageIndex:$('#pageIndex').val()},
dataType : 'html',
success :function(data){
var result=JSON.parse(data);
if(result.result_code==1){
alert('操作成功！');
window.parent.showUserData($('#pageIndex').val());//调用父页面方法，无刷新更新数据
window.parent.JqueryDialog.Close();
}else if(result.result_code==0){
alert('操作失败！');
}else{
top.location.href="<%=request.getContextPath()%>/error.jsp";
}
},
error : function(data) {
alert("获取数据失败！");
}
}); 如上代码中，从后台获取到result_code，然后判断并进行处理，注意这里使用到了吴剑 http://luck0235.cnblogs.com/童鞋的原创弹出层jQuery插件，这里表示感谢，使用弹出层用于修改也是为了实现页面完全的无刷新。读者可能看得稀里糊涂，建议读者打开源程序后结合我的博文来看。
增加用户与上述修改类似，下面来讲解无刷新显示用户列表和分页的实现，如下代码为用户列表，user-list.jsp:
<body οnlοad="showUserData()" style="margin:0px;padding:0px;">
<div id="content" style="padding:20px 20px">
<h2>ajax+servlet页面无刷新增删改查</h2>
<form method="post">
<div style="width: 350px;">
<div style="float: left">
<a href="javascript:JqueryDialog.Open('添加用户', 'UserAction?method=toAdd', 300, 300);">添加</a>
</div>
<div style="text-align: right">
<input type="text" name="userName" id="userName" value="${userName}" />
<input type="button" value="搜索" οnclick="showUserData()"/>
</div>
</div>
<table id="userList">
<thead>
<tr align="center">
<th><input type="checkbox" value="all" id="checkAll"/></th>
<th>序号</th>
<th>姓名</th>
<th>生日</th>
<th>角色</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<a href="UserAction?method=logout">退出</a>
</div>
</body>具体数据是使用js动态生成的，这样就实现了页面的无刷新，如下js：
/**
* 获取并显示用户列表
* @param pageIndex 当前页
*/
function showUserData(pageIndex) {
var jsonData={};
jsonData.method='list';
if(pageIndex!=null ||pageIndex>0)
jsonData.pageIndex=pageIndex;
var userName=$('#userName').val();
if(userName!=null &&userName!=''){
jsonData.searchUser=userName;
}
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'UserAction',
data : jsonData,
dataType : 'html',
success : function(data) {
var result = JSON.parse(data);
if (result.result_code == 1){
$('#userList tbody tr').remove();//移除先前数据
for ( var i = 0; i < result.data.length; i++) {
$('#userList tbody').append('<tr><td><input type=\'checkbox\' id=\'checkUser\' value=\''+result.data[i].userId+'\'\></td><td>'
+ (i + 1).toString()+ '</td><td>'
+ result.data[i].userName+ '</td><td>'
+ result.data[i].birthFmt+ '</td><td>'
+ result.data[i].roleName+ '</td><td>'
+ "<a href=\"javascript:JqueryDialog.Open('修改用户', 'UserAction?method=toUpdate&id="+result.data[i].userId+"&pageIndex="+result.page.pageIndex+"', 300, 300);\">编辑</a>|<a id='delete' href=\"javascript:deleteUser("+result.data[i].userId+","+result.page.pageIndex+")\">删除</a></td></tr>");
}
//显示分页
$('#userList tbody').append(showPage('showUserData',result.page));
}
},
error : function(data) {
$('#userList tbody').append("获取数据失败！");
}
});
}这里的用户列表数据也是使用JSON数据从后台servelt传过来的，具体的JSON数据简化是这样的：
{
"result_code":"1",
"data":[
{"birthFmt":"1990-03-11","password":"","roleId":2,"roleName":"teacher","userId":6,"userName":"ASP.NET"},
{"birthFmt":"2012-12-14","password":"","roleId":1,"roleName":"student","userId":7,"userName":"PHP"}],
"page":{"pageIndex":1,"pageSize":3,"skip":0,"totalPages":5,"totalRecords":14}
}主意这里有一个实现分页的通用方法showPage('showUserData',result.page)，其源代码如下：
/**
* 分页
* @param showData 显示数据表的方法名
* @param page 包含分页的JSON对象
* @returns 分页导航字符串
*/
function showPage(showData,page){
var sb = new StringBuilder();
sb.append("<tr><td colspan='6'>");
sb.append(page.pageIndex + "/"+ page.totalPages);
if (page.pageIndex > 1) {
sb.append("<a href=\"javascript:οnclick="+showData+"(1)\">首页</a><a href=\"javascript:οnclick="+showData+"("
+ (page.pageIndex-1).toString()+ ")\">上页</a>");
} else {
sb.append("<a href='#' disabled='disabled'>首页</a><a href='#' disabled='disabled'>上页</a>");
}
if (page.pageIndex < page.totalPages) {
sb.append("<a href=\"javascript:οnclick="+showData+"("+ (page.pageIndex+1).toString()
+ ")\">下页</a><a href=\"javascript:οnclick="+showData+"("+page.totalPages+ ")\">尾页</a>");
} else {
sb.append("<a href='#' disabled='disabled'>下页</a><a href='#' disabled='disabled'>尾页</a>");
}
sb.append("</td></tr>");
return sb.toString();
}分页的无刷新也就实现了，最后附上程序运行截图，有图有真相。
-
运行截图
- 用户列表
- 添加/修改
- 删除
好了，写了这么多，核心的东西就差不多都写完了，具体还用到了Filter用于用户登录拦截，独立的工程工具包porlet-core，时间选择插件simpleDatepicker，吴剑童鞋的弹出层插件等等，鉴于篇幅有限，这里就不一一介绍了，要深入研究或者遇到问题随时可以@我哦！最后恭喜大家逃过末日一劫，并祝圣诞快乐！
-
源码地址
该死的csdn无法提供附件，只得另外上传一下源码附件了，顺便赚点积分花花哈， *^_^*……
扫一扫
1343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
