Java servlet+Ajax 用户管理（完全无刷新增删改查及分页）

初入职场，在这程序员一抓一大把的时代，要生存，就要什么都要学一点，什么都要会一点。在java世界里目前充斥着各种框架，struts，spring……但究其根本还是离不开servlet，故鄙人从java最基础的servlet入手，研究如何不用框架但又利用框架的优势实现最简单的用户管理，这里使用到了ajax技术实现完全不刷新，主要是为了改善用户体验，对于ajax也是老生常谈的东西，这里就不多介绍，下文会具体讲解用法，好了，闲话休提，言归正传！  

开发环境  
           eclipse+tomcat6.0+mysql  

工程目录 

 
   
需要的jar包说明  
            1、用于java中JSON数据操作的有：  



          2、用于连接数据库  



         3、前台页面jsp标签  

后台实现  
         具体如何增删改查的代码就不贴了，具体见附件，贴上关键的servlet，如下：  

[java] view plaincopyprint?  
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);    
    }    
}    

    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)的实现：  

[java] view plaincopyprint?  
/**   
     * 去修改用户页面   
     *    
     * @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);    
        }    
    }    

/**  
     * 去修改用户页面  
     *   
     * @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)，如下代码：  

[java] view plaincopyprint?  
/**   
     * 修改用户   
     * @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));    
    }    

/**  
     * 修改用户  
     * @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代码如下：  

[javascript] view plaincopyprint?  
//使用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("获取数据失败！");    
    }    
    });      

    //使用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:  

[html] view plaincopyprint?  
<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>    

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

[javascript] view plaincopyprint?  
/**   
 * 获取并显示用户列表   
 * @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("获取数据失败！");    
                }    
            });    
}    

/**  
 * 获取并显示用户列表  
 * @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数据简化是这样的：  

[plain] view plaincopyprint?  
{    
   "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}    
}    

{  
   "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)，其源代码如下：  

[javascript] view plaincopyprint?  
/**   
 * 分页   
 * @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>");    
    } //www.sctarena.com   
    sb.append("</td></tr>");    
    return sb.toString();    
}    

/**  
 * 分页  
 * @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，吴剑童鞋的弹出层插件等等，鉴于篇幅有限，这里就不一一介绍了，要深入研究或者遇到问题随时可以

转自：http://www.sctarena.com/Article/Article.asp?nid=3442