投票系統的刪、改、查實現
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部分css
//顯示全部投票列表
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請求得到的數據，動態生成表格來實現，其中代碼寫的不是很精簡，不少代碼確定會有更好的複用性，這裏之後再慢慢修改。
相關文章
- 1. jsp實現投票系統
- 2. 投票系統的前臺實現
- 3. (轉）投票系統，更改ip刷票
- 4. ASP.Net0631防刷票投票系統系統
- 5. jsp在線投票調查系統mysql
- 6. angular4實戰--簡單的投票系統
- 7. 增刪查改的實現
- 8. 基於輪詢實現實時的在線投票系統
- 9. python 10min系列之實現增刪改查系統
- 10. 基於dubbo實現人員管理系統的增刪改查
- 更多相關文章...
- • Hibernate實現增刪改查 - Hibernate教程
- • PHP 實例 - AJAX 投票 - PHP教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jsp實現投票系統
- 2. 投票系統的前臺實現
- 3. (轉）投票系統，更改ip刷票
- 4. ASP.Net0631防刷票投票系統系統
- 5. jsp在線投票調查系統mysql
- 6. angular4實戰--簡單的投票系統
- 7. 增刪查改的實現
- 8. 基於輪詢實現實時的在線投票系統
- 9. python 10min系列之實現增刪改查系統
- 10. 基於dubbo實現人員管理系統的增刪改查