投票系統的前臺實現
- 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;
}
});
}
- servlet
跟咱們以前實現查詢的代碼同樣
- jsp部分
<style>
*{
margin:0;
padding:0;
}
#detail{
background-color:#eee;
width:800px;
margin:0px auto;
margin-top:40px;
}
</style>
<script type="text/javascript">
$(function(){
$.ajax({
method:"get",
url:"VoteServlet?flag=find",
data:"",
//dataType:"json",
success:function(msg){
//alert(msg);
var data = JSON.parse(msg);
//查看全部投票內容
showVoteList(data);
},
error:function(){
alert("數據請求錯誤,請稍後再試!");
}
});
});
function showVoteList(data){
$("#detail").empty();
if($.isEmptyObject(data)){
$("#detail").append("<div class='row' style='font-size:30px; padding-left:43%;height:80px; padding-top:20px;'>暫無相關數據</div>");
}else{
//循環數據
for(var i in data){
//顯示投票內容
var voteRow = $("<div class='row' style='font-size:25px; padding-top:10px'></div>");
voteRow.text(data[i].subContent);
//找到data中的全部選項
for(j in data[i].options){
//若是選項中的subID和咱們取得的subid同樣
if(data[i].options[j].subId == data[i].subId){
//將選項內容添加到投票內容下面
var optionRow = $("<div class='row' style='font-size:20px; margin-left:0px;background-color:#b3b3b3;margin-right:0'></div>");
//左邊複選框,右邊是選項內容
var leftRow = $("<div class='col-sm-1'></div>");
//複選框
var checkbox = $("<input type='checkbox' style='width:20px;height:25px;'/>")
var rightRow = $("<div class='col-sm-11' style='margin-left:-35px;'></div>")
leftRow.append(checkbox);
rightRow.text(data[i].options[j].opItem);
//將左右兩邊的div加到選項div中
optionRow.append(leftRow);
optionRow.append(rightRow);
//將選項div加到對應投票內容的div中
voteRow.append(optionRow);
}
}
$("#detail").append(voteRow);
}
}
}
</script>
</head>
<body>
<!-- 首頁投票內容顯示 -->
<div class='container' id="detail"></div>
</body>