按日期查询后台记录(JavaScript,Servlet)
2018-08-02 本文已影响0人
莫小归
需求:Web前端页面输入查询起止日期,传递给后端,按日期查询记录。
思路: 1.Web前端通过JavaScript设置默认日期;
2.用户在前端设置日期参数通过JavaScript传递到后端Servlet,Servlet通过传递的参数进行数据库查询。
要点: 1.JavaScript获取当前时间并设置date默认值。
2.JavaScript通过ajax向Servlet传递参数,Servlet向JavaScript写回结果。
代码: 1.Web前端获取当前日期并将之设为默认值
html代码:
<div class="weui-cells__title">按时间条件查询已付费预约</div>
<div class="weui-cells">
<div class="weui-cell">
<label class="weui-label">此日期后</label>
<input class="weui-input" type="date" name="app_start_date" id="query_date_start"/>
</div>
<div class="weui-cell">
<label class="weui-label">此日期前</label>
<input class="weui-input" type="date" name="app_end_date" id="query_date_end"/>
</div>
</div>
JavaScript设置默认日期代码:
1.给按时间查询预约的起止时间设置默认值
<script type="javascript/text">
$(document).ready(function () {
var now = new Date();
//格式化日,如果小于9,前面补0
var day = ("0" + now.getDate()).slice(-2);
//格式化月,如果小于9,前面补0
var month = ("0" + (now.getMonth() + 1)).slice(-2);
//拼装完整当天日期格式
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
//拼装当年第一天日期格式
var startday = now.getFullYear()+"-01-01";
//完成赋值
$('#query_date_end').val(today);
$('#query_date_start').val(startday);
});
<script>
2.将选定日期传递给后端Servlet进行数据库操作
JavaScript传递日期参数并获取返回数据代码:
function queryappbydate() {
//将查询参数传递给Servlet
$.get("/Servlet", {
method:"queryAppByDate",
start:$("#query_date_start").val(),
end:$("#query_date_end").val()
},
function (data) {
......
}
);
}
Servlet根据日期参数进行数据库查询:
protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
if (method.equals("queryAppByDate")){*
String start = request.getParameter("start");*
String end = request.getParameter("end");*
response.setContentType("text/html;charset=utf-8");//设置响应的内容格式*
PrintWriter out = response.getWriter();
// 数据库操作
YumMySQLUtil ymsql =new YumMySQLUtil();*
List list = ymsql.queryAppListByDate(start,end);*
//以json写回前端
JSONArray jsonArray = JSONArray.fromObject(list);*
out.println(jsonArray);*
}
}
掬水月在手,弄花香满衣