投票系统的前台实现

时间 2019-11-26

标签投票系统前台实现繁體版

原文原文链接

投票系统的前台实现

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>