後臺管理界面長這樣:
後臺管理界面的html代碼如下：
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>會員信息頁面</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="width: 100%;">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">會員列表</div>
<div class="panel-body">
<!-- 條件查詢 -->
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="form-group form-inline">
<span>用戶姓名</span>
<input type="text" name="username" class="form-control">
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="form-group form-inline">
<span>性別</span>
<label class="radio-inline">
<input type="radio" name="gender" value="男"> 男
</label>
<label class="radio-inline">
<input type="radio"name="gender" value="女"> 女
</label>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<button type="button" class="btn btn-primary" id="search"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
<!-- 列表顯示 -->
<table id="tb_list" class="table table-striped table-hover table-bordered">
</table>
<script type="text/javascript" charset="utf-8">
$(function(){
listAll();
})
</script>
<script type="text/javascript" charset="utf-8">
function listAll( ){
$.ajax({
type:"get",
url:"/MiStore/UserListServlet",
dataType:"json",
success:function(data){
if(data.code == 1){
var list = data.info;
$(list).each(function(){
var html = '<tr>';
html += '<td>' + this.id + '</td>';
html += '<td>' + this.phone + '</td>';
html += '<td>' + this.username + '</td>';
if (this.sex == 1) {
html += "<td>男</td>";
}else{
html += "<td>女</td>";
}
if(this.roleId == 1){
html += "<td>管理員</td>";
}else{
html += "<td>會員</td>";
}
//onclick點擊事件 + Ajax 獲取id 傳到後臺進行刪除操作
html += "<td><a href='#' onclick='deleteuser("+ this.id +")' class= 'btn btn-primary btn-xs'>刪除</a></td>";
html += "</tr>";
$("#tb_list").append($(html));
})
} else {
alert(data.info);
}
}
})
}
</script>
<script type="text/javascript">
function deleteuser (id){
$.ajax({
type:"get",
url:"/MiStore/UserManager?id=" + id,
dataType:"json",
success:function(data){
if (data.code == 1){
alert("刪除成功");
window.location.reload();
}
}
})
}
</script>
</div>
</div>
</div>
</div>
</body>
</html>
後臺Servlet代碼如下：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userId = request.getParameter("id");
int id = Integer.parseInt(userId);
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
try {
//調用service層，通過service層調用dao層，連接數據庫進行刪除操作
userService.deleleUser(id);
//JsonUtils是自己封裝的工具類
JsonUtils.bean2Json(1, null, response);
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
JsonUtils.bean2Json(0, e.getMessage(), response);
}
}
JsonUtils代碼如下：
public class JsonUtils {
//本工具使用了阿里的fastJson包，向悔創阿里的馬雲爸爸表示感謝
public static void bean2Json(int code,Object info,HttpServletResponse response) {
JsonBean bean = new JsonBean();
bean.setCode(code);
bean.setInfo(info);
PrintWriter writer = null;
try {
writer = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
writer.write(JSON.toJSONString(bean));
writer.flush();
writer.close()；
}
}
以上~~~ 繼續加油吧！！！