Java servlet+Ajax 使用者管理（完全無重新整理增刪改查及分頁）
阿新 • • 發佈：2019-02-14
初入職場，在這程式設計師一抓一大把的時代，要生存，就要什麼都要學一點，什麼都要會一點。在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 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無法提供附件，只得另外上傳一下原始碼附件了，順便賺點積分花花哈， *^_^*……