Java servlet+Ajax 用户管理(完全无刷新增删改查及分页)
2012-12-25 15:35
260 查看
初入职场,在这程序员一抓一大把的时代,要生存,就要什么都要学一点,什么都要会一点。在java世界里目前充斥着各种框架,struts,spring……但究其根本还是离不开servlet,故鄙人从java最基础的servlet入手,研究如何不用框架但又利用框架的优势实现最简单的用户管理,这里使用到了ajax技术实现完全不刷新,主要是为了改善用户体验,对于ajax也是老生常谈的东西,这里就不多介绍,下文会具体讲解用法,好了,闲话休提,言归正传!
2、用于连接数据库
3、前台页面jsp标签
在doPost方法中通过从前台获取的参数method判断将调用的方法,如URL地址为http://localhost:8080/myWeb-app/UserAction?method=toupdate为去修改用户页面,下面列出对应方法toUpdateUser(request,response)的实现:
strId为从前台获取的待修改用户id,然后查询到该用户放到user中返回前台,其中pageIndex用于分页,roles表示用户角色,然后回发到前台修改页面:user-edit.jsp。
然后我们来到修改用户的方法,updateUser(request,response),如下代码:
注意这里使用到了Java的插件(需要的jar包我也会给予下载)实现map转JSON数据,就是方法JSONUtil.mapToJson(map));具体的见后面源代码附件,这里如果修改成功会打印JSON数据{result_code:"1"},失败会打印{result_code,"0"},这个在前台ajax中获取,具体js代码如下:
如上代码中,从后台获取到result_code,然后判断并进行处理,注意这里使用到了吴剑
http://luck0235.cnblogs.com/童鞋的原创弹出层jQuery插件,这里表示感谢,使用弹出层用于修改也是为了实现页面完全的无刷新。读者可能看得稀里糊涂,建议读者打开源程序后结合我的博文来看。
增加用户与上述修改类似,下面来讲解无刷新显示用户列表和分页的实现,如下代码为用户列表,user-list.jsp:
具体数据是使用js动态生成的,这样就实现了页面的无刷新,如下js:
这里的用户列表数据也是使用JSON数据从后台servelt传过来的,具体的JSON数据简化是这样的:
主意这里有一个实现分页的通用方法showPage('showUserData',result.page),其源代码如下:
分页的无刷新也就实现了,最后附上程序运行截图,有图有真相。
添加/修改
删除
好了,写了这么多,核心的东西就差不多都写完了,具体还用到了Filter用于用户登录拦截,独立的工程工具包porlet-core,时间选择插件simpleDatepicker,吴剑童鞋的弹出层插件等等,鉴于篇幅有限,这里就不一一介绍了,要深入研究或者遇到问题随时可以@我哦!最后恭喜大家逃过末日一劫,并祝圣诞快乐!
http://download.csdn.net/detail/dynastqin/4926624
开发环境
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 onload="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="搜索" onclick="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:onclick="+showData+"(1)\">首页</a><a href=\"javascript:onclick="+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:onclick="+showData+"("+ (page.pageIndex+1).toString() + ")\">下页</a><a href=\"javascript:onclick="+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无法提供附件,只得另外上传一下源码附件了,顺便赚点积分花花哈, *^_^*……http://download.csdn.net/detail/dynastqin/4926624
相关文章推荐
- jsp+servlet+ajax实现无刷新增删改查数据库
- 客户(用户)管理系统---基于数据库javaweb的增删改查
- 菜鸟学Java(七)——Ajax+Servlet实现无刷新下拉联动
- 菜鸟学Java(七)——Ajax+Servlet实现无刷新下拉联动
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现 加上你的CSS完全可以与EXT媲美哦
- 权限管理页面,ajax异步刷新,获取当前用户权限-checkbox显示已选
- 完全基于Servlet的简单用户管理系统
- JAVA_WEB项目(结合Servlet+jsp+ckEditor编辑器+jquery easyui技术)实现新闻发布管理系统第四篇:前台首页,新闻分类(体育新闻,科技新闻等),新闻列表分页的实现
- Java简单示例-用户登录、单个页面的增删改查及简单分页
- PHP + AJAX 实现无刷新分页 不刷新页面实现分页 PHP AJAX
- 基于MVC 用户登录的实现(JavaBean + Servlet + JSP)
- 前端ajax,后台java+springmvc实现异步表格局部刷新分页
- javascript项目实战---ajax实现无刷新分页
- JSP+Servlet+Ajax实现后台异步检验用户信息实例
- jsp+servlet+javabean完成的简单员工信息管理
- java程序员菜鸟进阶(十五)linux基础入门(三)linux用户和组管理
- Ajax实现无刷新分页实例代码
- 毕业设计(十三)---后台用户管理(3)之- 带查询条件 分页查找方法
- jquery+jquery.pagination+php+ajax 无刷新分页
- 用magicajax实现无刷新分页