用ajax怎么实现与数据库的动态查询
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='../static/doctorimage/fullcalendar-3.6.1/fullcalendar.min.css' rel='stylesheet' />
<link href='../static/doctorimage/fullcalendar-3.6.1/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href="../static/dsadmin/assets/css/bootstrap.min.css" rel="stylesheet" />
<script src='../static/doctorimage/fullcalendar-3.6.1/lib/moment.min.js'></script>
<script src='../static/doctorimage/fullcalendar-3.6.1/lib/jquery.min.js'></script>
<script src='../static/doctorimage/fullcalendar-3.6.1/lib/jquery-ui.min.js'></script>
<script src='../static/doctorimage/fullcalendar-3.6.1/fullcalendar.min.js'></script>
<script src='../static/doctorimage/fullcalendar-3.6.1/locale/zh-cn.js'></script>
<script src="../static/dsadmin/healthtest/js/layer/layer.js" type="text/javascript"></script>
<script src="../static/dsadmin/healthtest/js/layer/layer.config.js" type="text/javascript"></script>
<script src="../static/dsadmin/assets/layer/layer.js" type="text/javascript" ></script>
<script src="../static/dsadmin/assets/laydate/laydate.js" type="text/javascript"></script>
<style type="text/css">
.SchedulingBot_left table{width:100%;line-height: 25px;font-size: 14px;border-collapse: collapse;border-bottom: 1px solid #ddd;display: table;border-spacing: 2px;}
.SchedulingBot_left table th:first-child{width:84px;}
.SchedulingBot_left table{text-align: center}
.SchedulingBot_left table th,.SchedulingBot_left table td{border-bottom:1px solid #eaeaea;border-left:1px solid #eaeaea}
.SchedulingBot_left table th:first-child,.SchedulingBot_left table td:first-child{border-left: 0;background:#f4f4f4 }
.SchedulingBot_left table th>div{line-height: 55px;height:55px;background: #f4f4f4;font-weight: bold}
.SchedulingBot_left table td>div{line-height: 48px;height:50px;border:1px solid transparent;-moz-user-select: none; -khtml-user-select: none; user-select: none;-moz-user-select:none;}
.SchedulingBot_left table td.tdChecked>div{background: #f0f6ff }
.SchedulingBot_left table td.borderTop>div{border-top-color: #4b96ff}
.SchedulingBot_left table td.borderLeft>div{border-left-color: #4b96ff}
.SchedulingBot_left table td.borderRight>div{border-right-color: #4b96ff}
.SchedulingBot_left table td.borderBottom>div{border-bottom-color: #4b96ff}
.SchedulingBot_left table td>div{cursor: pointer;}
.SchedulingBot_left table .username{position: relative;cursor: pointer;overflow: hidden}
.SchedulingBot_left table .username>div{position: absolute;width:100%;height:100%;background:#f4f4f4;text-align: center;color:#4b96ff;line-height: 1.3;top:100%;left:0;padding-top: 5px;transition: all .2s; }
.SchedulingBot_left .exchangeTr{background: #d8edff}
.SchedulingBot_left .exchangeTr .username>div,.SchedulingBot_left table .username:hover>div{top:0;}
.SchedulingHalf.SchedulingBot>.SchedulingBot_right{min-height: 100%;height:auto}
.SchedulingBot_right{font-size: 0;padding: 10px 19px; }
.SchedulingBot_right>div{display: inline-block;cursor: pointer;;margin: 10px;text-align:center;line-height: 38px;padding: 0 10px;min-width: 80px;height:40px;font-size: 14px;border-radius: 4px;border:1px solid #dcdfe6;box-shadow: 0 2px 0 rgba(0,0,0,.045);}
.SchedulingHalf{position: relative}
.SchedulingHalf>div:first-child{padding-right:240px }
.SchedulingHalf>div:nth-child(2){border-left: 1px solid #eaeaea;;position:absolute;width:240px;top:0;right:0;height:100%}
</style>
<title>排班日历</title>
</head>
<body>
<!-- /*日期*/ -->
<div class="layui-inline prevWeek"><i class="iconfont icon-gengduo1"></i>上一周</div>
<input type="text" id="weekTime" value="{$start_time}~{$end_time}" readonly/>
<div class="layui-inline nextWeek">下一周<i class="iconfont icon-gengduo1"></i></div>
<!-- /*排班区域*/ -->
<div class="SchedulingHalf SchedulingBot">
<div class="SchedulingBot_left">
<div>
<table>
<thead id="table_top"><tr></tr></thead>
<tbody id="table_all">
<tr>
<td>
<div class="username">
<span>傻大木</span>
</div>
</td>
<td class="banTd">
<div>
</div>
</td>
<td class="banTd"><div></div></td><td class="banTd"><div></div></td><td class="banTd"><div></div></td><td class="banTd"><div></div></td><td class="banTd"><div></div></td><td class="banTd"><div></div></td>
</tr>
<tr>
<td><div class="username"><span>aa</span></div></td><td class="banTd"><div></div></td><td class="banTd"><div></div></td><td class="banTd"><div></div></td><td class="banTd"><div></div></td><td class="banTd"><div></div></td><td class="banTd"><div></div></td><td class="banTd"><div></div></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /*班种*/ -->
<div class="SchedulingBot_right">
<div id="copy">复制</div>
<div id="paste">粘贴</div>
<div id="deleteAll">清空选中</div>
<div class="banBtn" itColor="#333333" itID="1">白班</div>
<div class="banBtn" itColor="#70309f" itID="2">夜班</div>
<div class="banBtn" itColor="#00af50" itID="3">夜班1</div>
<div class="banBtn" itColor="#ffc001" itID="4">夜班2</div>
<div class="banBtn" itColor="#fe0000" itID="5">夜班3</div>
</div>
</div>
</body>
</html>
<script>
/** * 时间切换 * **/
var formatNumber = function(n){return n < 10 ? "0" + n : n;};
var weekHan=["周一","周二","周三","周四","周五","周六","周日"];
var st,et;//周循环的开始结束 //获取指定日期
function getDate(date, day) {
var newD={};
var dd = new Date(date);
dd.setDate(dd.getDate() + day);
var y = dd.getFullYear();
var m = formatNumber(dd.getMonth() + 1);
var d = formatNumber(dd.getDate()) ;
newD.md=m + "-" + d;
newD.ymd=y + "-" + m + "-" + d;
return newD;
};
// 初始时间（周）
var today=new Date();
var toWeekDay=today.getDay();
if(toWeekDay>0){st=1-toWeekDay;et=7-toWeekDay; }else{st=-6;et=0;}
var toWeek=today.getFullYear() + "-" + formatNumber(today.getMonth() + 1) + "-" + formatNumber(today.getDate()); weekTime(toWeek,st,et);
//时间循环
function weekTime(tod,sta,ent){
var str='<th><div></div></th>';
var strInput='';
var w=0;
for(var i=sta;i<=ent;i++){
var arD=getDate(tod, i);
str+='<th><div data-day="'+arD.ymd+'">'+arD.md+' '+weekHan[w]+'</div></th>';
if(w==0){strInput+=arD.ymd+'~'}
if(w==6){strInput+=arD.ymd}
w++;
}
$(".SchedulingBot_left").find("thead>tr").html(str);
$("#weekTime").val(strInput);
}
//上一周
$(".prevWeek").off("click").on("click",function(){
var theDay=$(".SchedulingBot_left").find("th").eq(1).children().attr("data-day");
weekTime(theDay,-7,-1);
});
//下一周
$(".nextWeek").off("click").on("click",function(){
var theDay=$(".SchedulingBot_left").find("th").last().children().attr("data-day");
weekTime(theDay,1,7);
})
</script>
<script>
var checkedTr;// 选中区域的行
/* * 选中区域 * */
var mouseDownFlag=false,StartX = false,StartY = false,EndX = false,EndY = false;
$(document).on("mousedown",".banTd",function(){
StartX = $(this).index();
if(StartX==0)StartX=1;
StartY = $(this).parent().index();
mouseDownFlag=true;
});
$(document).on("mousemove",".banTd",function(){
EndX = $(this).index();
if(EndX==0)EndX=1;
EndY = $(this).parent().index();
if(mouseDownFlag) initSelcted();
});
$(document).on("mouseup",function(){
if(mouseDownFlag) initSelcted();
mouseDownFlag=false;
});
function initSelcted(){
//1.处理反向拖动
var tempStartY = StartY,tempStartX = StartX,tempEndX = EndX,tempEndY = EndY;
if(tempEndY<tempStartY) tempEndY = [tempStartY,tempStartY=tempEndY][0];
if(tempEndX<tempStartX) tempEndX = [tempStartX,tempStartX=tempEndX][0];
//2.获取选中TR
$(".SchedulingBot_left").find("td").removeClass("tdChecked").removeClass("borderLeft").removeClass("borderRight").removeClass("borderTop").removeClass("borderBottom"); var listY = $('.SchedulingBot_left tbody').children();
var beginTR = listY.filter(':eq('+tempStartY+')');
var AllTR = listY.filter(':gt('+tempStartY+')').filter(':lt('+(tempEndY-tempStartY)+')').add( beginTR );
checkedTr=AllTR;
//3.筛选选中TD
var AllTD = $('');
AllTR.each(function(k){
var listX = $(this).children();
var oneLineTD = listX.filter(':gt('+tempStartX+')').filter(':lt('+(tempEndX-tempStartX)+')').add( listX.filter(':eq('+tempStartX+')') );
AllTD.add(oneLineTD.addClass("tdChecked"));
$(oneLineTD[0]).addClass("borderLeft");
$(oneLineTD[oneLineTD.length-1]).addClass("borderRight");
if(k==0){oneLineTD.addClass("borderTop")}
if(k==AllTR.length-1){oneLineTD.addClass("borderBottom")}
});
return AllTD.addClass("tdChecked")
}
</script>
<script>
var copyArr=[],copyTr;
/** * 班种/复制/粘贴/清空 点击 * **/
// 清空
$("#deleteAll").off("click").on("click",function(){
$(".SchedulingBot_left").find("td.tdChecked").children().html("")
});
// 选择班种
$(".SchedulingBot_right").off("click",".banBtn").on("click",".banBtn",function(){
var name=$(this).html(),itId=$(this).attr("itID"),itColor=$(this).attr("itColor");
/*选中区域都赋值*/
$(".SchedulingBot_left").find("td.tdChecked").each(function(){
var dou="";
if($(this).find("span").length<3){
if($(this).find("span").length>=1){dou=","}
$(this).children().append('<span itId="'+itId+'" style="color:'+itColor+'">'+dou+name+'</span>')
}else{
alert("最多只能选择三个班次!");
}
});
})
// 复制
$("#copy").off("click").on("click",function(){
copyArr=[];
copyTr=checkedTr;
$(".SchedulingBot_left").find("td.tdChecked").each(function(k,v){
copyArr.push($(this).children().html())
});
layer.msg('复制成功', {icon: 6});
});
// 粘贴
$("#paste").off("click").on("click",function(){
EndY=StartY+copyTr.length-1;
var bodyTrLen=$(".SchedulingBot_left tbody").children().length;
if(EndY > bodyTrLen-1){EndY=bodyTrLen-1}
EndX =StartX+copyArr.length/copyTr.length-1;
if(EndX > 7){EndX=7}
initSelcted();
$(".SchedulingBot_left").find("td.tdChecked").each(function(k){
$(this).children().html(copyArr[k])
});
});
</script>
现在实现的只是静态的页面刷新之后什么都没有了,怎么实现动态的 如果数据库有这段时间的数据打开页面之后进行显示
如果数据库有这段时间的数据打开页面之后进行显示:
即你在打开这个界面的时候需要重新去加载列表数据，而列表加载的数据就是你自己上一步存储的数据，在打卡的时候查询后加载出来就可实现了