关于ajax如何异步动态加载table显示数据库内容

在做考勤系统的时候，需要将多条件查询的结果显示在同页面的table中，不用跳转页面。下面是效果图

输入条件点击查询异步加载出数据库的内容。

1.写好html前台代码

这里就是一个table的样式。

<div id="text2">
					<table class="ui nine column table celled table-result"
					id="table-result" data-toggle="table"
					 >
                       <thead>
							<tr>
								<th style = "width :60px">工号</th>
								<th style = "width :60px">姓名</th>
								<th style = "width :60px">入职时间</th>
								<th style = "width :60px">状态</th>
								<th style = "width :60px">备注</th>
								<th style = "width :60px">入职时间</th>								
							</tr>
						</thead>
						<tbody id="text1">//最重要，这是后面ajax获取的id
						</tbody>
					</table>
				</div>

2.写好前端代码，下面来写js

	   function s1(){  
        
        	var start = $("#starttime").val();
        	var finalt = $("#finaltime").val();
         var userstate = document.getElementById("userstate").value;
 		var user = $("#user").val();
 alert(finalt);
        $.ajax({  
            type: "POST",  //提交方式
            dataType: "json",  //数据格式设置
            url: "UserSearch",  //数据处理页面
            data: {  
                user:user, 
                start : start,
				finalt : finalt,
                userstate : userstate
            },  
            success: function (msg) {  //成功时的回调函数
	        $("#text1").html("");//清除之前所生成的tr,不然再次查询会追加到原来的表格中
			$(msg).each(
					
             function (i, values) {
            	 //$(".t").remove();
            	 
                 $("#text1").append(  //这里就是将前端tbody text1 加载内容
                     "<tr><td style = 'width :60px'>"+values.uid+"</td>"
                     +"<td style = 'width :60px'>"+values.uname+"</td>"
                     +"<td style = 'width :60px' >"+values.uworktime+"</td>"
                     +"<td style = 'width :60px' >"+values.ustate+"</td>"
                     +"<td style = 'width :60px' >"+values.unote+"</td>"
                     +"<td style = 'width :60px' >"+values.utime+"</td></tr>"
                 );

             }
         );
            },  
            error: function () {  
                alert("查询失败")  
            }  
        });  
    }  

3.触发这个事件的button代码

<input type="button" id="searchs" value="查询" onclick="s1();fomrReset()"
							class="btn btn-primary btn-lg active"
							style="margin-left: 150px; margin-right: 30px;"></input>

关键代码就是onclick = “s1()”

Servlet处理代码

request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		String user = request.getParameter("user");
		String userstate = request.getParameter("userstate");
		String start = request.getParameter("start");
		String finaltime  = request.getParameter("finalt");
		
		System.out.print(finaltime);
//		user = URLDecoder.decode(user,"utf-8");
//		userstate = URLDecoder.decode(userstate,"utf-8");
//		start = URLDecoder.decode(start,"utf-8");
//		finaltime = URLDecoder.decode(finaltime,"utf-8");
		//多条件查询
				String sql = "select userinform.uid,userinform.uname,uworktime,ustate,unote,utime from note,userinform where note.uid = userinform.uid  ";
				if(user!=null && !user.equals("")){
				    sql += "and userinform.uname like '%"+user+"%'";
				}
				if(userstate!=null && !userstate.equals("")) {
					sql += "and ustate like '%"+userstate+"%'";
					
				}
				if(start!=null && !start.equals("") && finaltime != null && !finaltime.equals("") ) {
					sql +=" and date_format(utime,'%Y-%m-%d') BETWEEN str_to_date('"+start+"', '%Y-%m-%d') AND str_to_date('"+finaltime+"', '%Y-%m-%d')";
				}
				sql +="order by utime desc,uid asc";
//				request.setAttribute("sql", sql);		
//				request.getRequestDispatcher("usershow.jsp").forward(request, response);
//				

				Caozuo caozuo = new Caozuo();
				List<userAllInform> lists = caozuo.workshow(sql);
				
                 ObjectMapper mapper = new ObjectMapper();  //将lists集合转换成json格式传递到前端界面
                 mapper.writeValue(response.getWriter(), lists);

关键代码就是最后两句将查询到的lists集合转换成json格式输出到前端

                                       共同努力