美文网首页
按日期查询后台记录(JavaScript,Servlet)

按日期查询后台记录(JavaScript,Servlet)

作者: 莫小归 | 来源:发表于2018-08-02 10:17 被阅读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);*
            }
    }
    

    掬水月在手,弄花香满衣

    相关文章

      网友评论

          本文标题:按日期查询后台记录(JavaScript,Servlet)

          本文链接:https://www.haomeiwen.com/subject/rdkjvftx.html