按日期查询后台记录(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);*
        }
}

掬水月在手,弄花香满衣

上一篇下一篇

猜你喜欢

热点阅读