投票系統的前臺實現

投票系統的前臺實現

  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;
			}
		});
	}
  1. servlet
跟咱們以前實現查詢的代碼同樣
  1. 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>
相關文章
相關標籤/搜索