1.投票系统的全部展示
- dao部分
public List<Subject> findAll(int currentPage, int pageSize) {
String sql = "select subid,subContent from tb_subject limit ?,?";
return DAOHelper.executeQuery(conn1, sql, new Object[]{(currentPage-1)*pageSize,pageSize}, new CallBack() {
public List getList(ResultSet rs) {
List list = new ArrayList();
Subject sub = null;
OptionsDAO odao = new OptionsDAO();
try {
while(rs.next()){
sub = new Subject();
sub.setSubId(rs.getInt("subid"));
sub.setSubContent(rs.getString("subContent"));
sub.setOptions(odao.findBySubId(rs.getInt("subid")));
list.add(sub);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
});
}
2.servlet部分
//显示所有投票列表
private void voteList(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
//暂时没有分页，分页写死
int currentPage = 1;
int pageSize = 20;
//取得subject列表
SubjectDAO sdao = new SubjectDAO();
List<Subject> subject = sdao.findAll(currentPage, pageSize);
//设置返回的字符串格式
response.setCharacterEncoding("utf-8");
//将数组对象转换成json字符串
JSONArray o = JSONArray.fromObject(subject);
String sub = o.toString();
//将字符串传递给ajax的回调函数
PrintWriter pw = response.getWriter();
pw.println(sub);
pw.flush();
pw.close();
}
- jsp部分
$(function(){
$.ajax({
method:"get",
url:"VoteServlet?flag=find",
data:"",
//dataType:"json",
success:function(msg){
var data = JSON.parse(msg);
//查看所有投票内容
showVoteList(data);
//显示投票内容详情
showInfo();
//修改投票内容
updateVote();
//删除投票内容及选项
deleteVote();
},
error:function(){
alert("数据请求错误,请稍后再试!");
}
});
});
//显示所有投票列表
function showVoteList(data){
//首先清空表格
$("#dataTab").empty();
//判断数据是否为空
if($.isEmptyObject(data)){
$("#dataTab").append("<tr><td class='warning' colspan='3' style='width:100%;font-size:20px;text-align:center'>暂无相关数据<td></tr>");
}
else{
for(var i in data){
var tr = $("<tr></tr>");
//详情列
var td1 = $("<td class='info'></td>");
//内容列
var td2 = $("<td class='success' style='text-align:center;font-size:15px;'></td>");
//操作列
var td3 = $("<td class='warning' style='text-align:center'></td>");
//创建td4,用来放subId
var td4 = $("<td></td>");
//td4隐藏
td4.hide();
//详情按钮
var btn_info = $('<button type="button" class="btn btn-info">详情</button>');
//修改按钮
var btn_update = $('<button type="button" class="btn btn-warning" >修改</button>');
//删除按钮
var btn_delete = $('<button type="button" class="btn btn-danger" style="margin-left:7px;">删除</button>');
td1.append(btn_info);
//取得投票内容
var subContent = data[i].subContent;
td2.html(subContent);
//表格列添加修改、删除按钮
td3.append(btn_update).append(btn_delete);
//取得subId
var subId = data[i].subId;
td4.html(subId);
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
$("#dataTab").append(tr);
}
}
}
2.投票系统的详情展示
- dao部分
Connection conn1;
public OptionsDAO(){
this.conn1 = DBConnection.getConn();
}
//根据投票内容id显示选项内容
public List findBySubId(int subId) {
String sql = "select opid,opitem,voteCount,subid from tb_options where subid=?";
List list = DAOHelper.executeQuery(conn1, sql, new Object[]{subId}, new CallBack() {
public List getList(ResultSet rs) {
List list = new ArrayList();
Options o = null;
try {
while(rs.next()){
o = new Options();
o.setOpId(rs.getInt("opid"));
o.setOpItem(rs.getString("opitem"));
o.setVoteCount(rs.getInt("voteCount"));
o.setSubId(rs.getInt("subid"));
list.add(o);
}
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
});
return list.size()>0?list:null;
}
- servlet部分
//投票内容详情
private void voteInfo(HttpServletRequest request,
HttpServletResponse response) throws IOException {
String subid = request.getParameter("subid");
int subId = Integer.parseInt(subid);
OptionsDAO odao = new OptionsDAO();
List<Options> list = odao.findBySubId(subId);
response.setCharacterEncoding("utf-8");
JSONArray o = JSONArray.fromObject(list);
String str = o.toString();
PrintWriter pw = response.getWriter();
pw.println(str);
pw.flush();
pw.close();
}
- jsp部分
//查看详情
function showInfo(){
$(".btn-info").click(function(){
$("#celling").css({"display":"block"});
$("#result_info").css({"display":"block"});
//找到subId
var subId = $(this).parents("tr").find("td:last").html();
var subContent = $(this).parents("tr").find("td[class='success']").html();
//alert(subContent);
$.ajax({
method:"get",
url:"VoteServlet?flag=info&subid="+subId,
data:"",
success:function(msg){
var data = JSON.parse(msg);
findResult(data,subContent);
},
error:function(){
alert("数据请求错误，请稍后再试!");
}
});
});
}
//填充查看详情结果
function findResult(data,subContent){
$("#result_info").empty();
var array = new Array('A','B','C','D',
'E','F','G','H','I','J','K');
//投票内容
var tr = $("<tr></tr>");
var contentTd1 = $("<td class='warning' style='text-align:center;font-size:20px;width:20%'></td>");
contentTd1.html("投票内容");
var contentTd2 = $("<td class='success' style='text-align:center;font-size:20px;width:80%'></td>");
contentTd2.html(subContent);
tr.append(contentTd1);
tr.append(contentTd2);
$("#result_info").append(tr);
for(var i in data){
var tr = $("<tr></tr>");
//选项内容
var optionTd1 = $("<td class='warning' style='text-align:center;font-size:20px;width:20%'></td>");
optionTd1.html("选项内容" + array[i]);
var optionTd2 = $("<td class='success' style='text-align:center;font-size:20px;width:80%'></td>");
optionTd2.html(data[i].opItem);
tr.append(optionTd1);
tr.append(optionTd2);
$("#result_info").append(tr);
}
var tr1 = $("<tr></tr>");
var td = $("<td></td>");
var cancelButton = $('<button type="button" class="btn btn-warning" style="margin-left:26%;margin-top:10px;">退出查看</button>');
tr1.append(td).append(cancelButton);
$("#result_info").append(tr1);
cancelButton.click(function(){
$("#celling").css({"display":"none"});
$("#result_info").css({"display":"none"});
});
}
<style>
#result_info{
position:fixed;
width:800px;
margin-left:35%;
margin-top:-35%;
z-index:1100;
-moz-opacity:0.9; /*兼容火狐*/
opacity:0.9; /*透明度，ie不支持*/
filter:Alpha(opacity=30); /*兼容IE滤镜*/
display:none;
}
#celling{
position:absolute;
left:0;
top:0;
width: 100%;
height:100%;
background-color: #ffffff;
z-index:1000; /*当前层的叠放顺序，值越大，越上层*/
-moz-opacity:0.3; /*兼容火狐*/
opacity:0.3; /*透明度，ie不支持*/
filter:Alpha(opacity=30); /*兼容IE滤镜*/
display:none;
}
</style>
<div id="celling"></div>
<!-- 一个table用于存放我们投票内容详情 -->
<table id="result_info" class="table table-hover"></table>
3.投票系统的更新操作
- dao部分
//更新操作
public boolean update(Subject sub, Connection conn) {
String sql = "update tb_subject set subContent=? where subid=?";
return DAOHelper.executeUpdate(conn, sql, new Object[]{sub.getSubContent(),sub.getSubId()});
}
//更新操作
public boolean update(int opid, String opitem, Connection conn) {
String sql = "update tb_options set opitem=? where opid=?";
return DAOHelper.executeUpdate(conn, sql, new Object[]{opitem,opid});
}
- servlet部分
private void updateVote(HttpServletRequest request,
HttpServletResponse response) throws SQLException, IOException {
String subContent = request.getParameter("subContent");
String subId = request.getParameter("subId");
int subid = Integer.parseInt(subId);
String options = request.getParameter("opArray");
//System.out.println(options);
String[] opArray = options.split(",");
//System.out.println(opArray.length);
//System.out.println(subContent+"=="+subId+"=="+opArray);
//建立一个连接 保持事务的一致性
Connection conn = DBConnection.getConn();
conn.setAutoCommit(false);
SubjectDAO sdao = new SubjectDAO();
OptionsDAO odao = null;
Options o = null;
Subject sub = new Subject();
sub.setSubId(subid);
sub.setSubContent(subContent);
boolean f = sdao.update(sub,conn);
if(f){
for(int i = 0;i < opArray.length;i++){
String str = opArray[i].substring(1,opArray[i].length()-1);
String[] strArr = str.split(":");
String opContent = strArr[1];
//System.out.println(strArr[0]);
int opid = Integer.parseInt(strArr[0]);
odao = new OptionsDAO();
odao.update(opid,opContent,conn);
}
//提交事务
conn.commit();
//设置返回字符格式
response.setCharacterEncoding("utf-8");
//定义页面大小
int currentPage = 1;
int pageSize = 20;
//更新成功后，查询数据库，显示最新数据
SubjectDAO subdao = new SubjectDAO();
List<Subject> subject = sdao.findAll(currentPage, pageSize);
JSONArray obj = JSONArray.fromObject(subject);
String subj = obj.toString();
System.out.println(subj);
//将最新数据返回到ajax回调函数
PrintWriter pw = response.getWriter();
pw.println(subj);
pw.flush();
pw.close();
}
}
- jsp部分
//修改投票内容详情
function updateVote(){
$(".btn-warning").click(function(){
$("#celling").css({"display":"block"});
$("#result_info").css({"display":"block"});
//找到subId
var subId = $(this).parents("tr").find("td:last").html();
var subContent = $(this).parents("tr").find("td[class='success']").html();
//alert(subContent);
$.ajax({
method:"get",
url:"VoteServlet?flag=info&subid="+subId,
data:"",
success:function(msg){
var data = JSON.parse(msg);
updateResult(data,subContent,subId);
},
error:function(){
alert("数据请求错误，请稍后再试!");
}
});
});
}
//修改投票内容
function updateResult(data,subContent,subId){
$("#result_info").empty();
var array = new Array('A','B','C','D',
'E','F','G','H','I','J','K');
//投票内容
var tr = $("<tr></tr>");
var contentTd1 = $("<td class='warning' style='text-align:center;font-size:20px;width:20%'></td>");
contentTd1.html("投票内容");
var contentTd2 = $("<td class='success' style='text-align:center;font-size:20px;width:80%'></td>");
var inputContent = $("<input style='height:40px;font-size:20px;width:100%;' id='subTitle'></input>");
//创建td4,用来放subId
inputContent.val(subContent);
tr.append(contentTd1);
tr.append(contentTd2);
contentTd2.append(inputContent);
$("#result_info").append(tr);
for(var i in data){
var tr = $("<tr></tr>");
//选项内容
var optionTd1 = $("<td class='warning' style='text-align:center;font-size:20px;width:20%'></td>");
optionTd1.html("选项内容" + array[i]);
var optionTd2 = $("<td class='success' style='text-align:center;font-size:20px;width:80%'></td>");
var inputOption = $("<input style='height:40px;font-size:20px;width:100%;' name='op'></input>");
inputOption.val(data[i].opItem);
//创建td3,用来放opId
var td3 = $("<td id='opId'></td>");
//td3隐藏
td3.hide();
td3.text(data[i].opId);
tr.append(optionTd1);
optionTd2.append(inputOption);
tr.append(optionTd2);
tr.append(td3);
$("#result_info").append(tr);
}
var tr1 = $("<tr></tr>");
var td = $("<td></td>");
var updateButton = $('<button type="button" class="btn btn-danger" style="margin-left:20%;margin-top:10px;">修改</button>');
var backButton = $('<button type="button" class="btn btn-primary" style="margin-left:5%;margin-top:10px;">重置</button>');
var cancelButton = $('<button type="button" class="btn btn-warning" style="margin-left:5%;margin-top:10px;">取消</button>');
tr1.append(td).append(updateButton).append(backButton).append(cancelButton);
$("#result_info").append(tr1);
//取消按钮事件
cancelButton.click(function(){
$("#celling").css({"display":"none"});
$("#result_info").css({"display":"none"});
});
//重置按钮事件
backButton.click(function(){
updateResult(data,subContent);
});
//修改按钮事件
var jsonArray = new Array();
updateButton.click(function(){
if(window.confirm("修改后,数据将不可复原,请确认你的操作?")){
var subTitle = $("#subTitle").val();
$("td").each(function(){
var tmp = "";
//找到存放opId的隐藏列
if($(this).attr("id") == "opId"){
//opId
var opId = $(this).text();
//找到选项内容
var opContent = $(this).parents("tr").find("td").find("input[name='op']").val();
tmp = '{'+opId+':'+opContent+'}';
jsonArray.push(tmp);
}else{
return;
}
});
$.ajax({
method:"post",
url:"VoteServlet",
data:"flag=update"+"&subContent="+subTitle+"&subId="+subId+"&opArray="+jsonArray,
success:function(msg){
var data = JSON.parse(msg);
showVoteList(data);
alert("更新成功!");
},
error:function(){
alert("数据提交错误,请稍后再试");
}
});
}
});
}
- 说明: 当我们点击修改按钮时，会弹出一个div遮罩层,里面显示当前选中投票内容的详细信息，以及修改，重置，返回三个按钮，点击重置按钮时执行重置按钮事件，点击修改按钮时，执行修改按钮事件，在修改按钮事件中我们首先找到存放有opId的隐藏列(td)，获得td中的内容，用到each()方法，接着，我们去取td的所有父节点tr,找到，input标签，获取input标签中的值，最后，我们定义了一个数组，用于存放我们的数据，每次取到一条数据，我们便将数据以{opId:opContent}的格式，添加到数组中，然后利用ajax将数组等参数传到servlet，然后调用servlet中的方法进行解析，最后数据库更新成功后，我们查询数据库将最新的内容传给ajax的回调函数，执行显示所有投票内容列表的那个函数，使得页面内容也得到即时更新。其中，在servlet中我们定义了一个connection，使得我们的选项内容的修改和投票内容的修改在一个事务中进行。
投票系统的删除操作
- dao部分
//删除操作
public boolean delete(int subId, Connection conn) {
String sql = "delete from tb_subject where subid=?";
return DAOHelper.executeUpdate(conn, sql, new Object[]{subId});
}
//删除操作
public boolean delete(int subId, Connection conn) {
String sql = "delete from tb_options where subid=?";
return DAOHelper.executeUpdate(conn, sql, new Object[]{subId});
}
- servlet部分
//删除投票内容及选项内容
private void deleteVote(HttpServletRequest request,
HttpServletResponse response) throws SQLException, IOException, ServletException {
String subid = request.getParameter("subid");
int subId = Integer.parseInt(subid);
System.out.println(subId);
Connection conn = DBConnection.getConn();
conn.setAutoCommit(false);
SubjectDAO sdao = new SubjectDAO();
OptionsDAO odao = new OptionsDAO()
//这里我们先删除选项再删除投票内容是因为，subid是外键。
boolean f = odao.delete(subId,conn);
System.out.println(f);
if(f){
boolean f1 = sdao.delete(subId,conn);
System.out.println(f1);
if(f1){
conn.commit();
voteList(request, response);
}
}
}
- jsp部分
//清除投票内容及选项内容
function deleteVote(){
$(".btn-danger").click(function(){
if(window.confirm("修改后,数据将不可复原,请确认你的操作?")){
//找到subId
var subId = $(this).parents("tr").find("td:last").html();
$.ajax({
method:"post",
url:"VoteServlet",
data:"subid="+subId+"&flag=delete",
success:function(msg){
var data = JSON.parse(msg);
showVoteList(data);
},
error:function(){
alert("删除失败,请稍后再试");
}
});
}
});
}
总结
投票系统的修改，查询等操作，我们采用的都是基于ajax请求获得的数据，动态生成表格来实现，其中代码写的不是很精简，很多代码肯定会有更好的复用性，这里以后再慢慢修改。
扫一扫
974
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
