如何设置默认日期参数以传递给 JavaScript 中的 ajax get 调用，在选择日期值时它应该更改答案

【问题标题】：How to set a default date parameter to pass to ajax get call in JavaScript, on selecting date value it should change如何设置默认日期参数以传递给 JavaScript 中的 ajax get 调用，在选择日期值时它应该更改
【发布时间】：2020-08-15 02:02:43
【问题描述】：

我正在尝试在页面加载时显示当前日期出勤率，并在选择日期后选择该日期详细信息并显示它。

我得到的结果和我需要的：

现在我的结果是：

如果我搜索所需日期，我会同时获得默认日期数据和选定日期数据。
问题是，每当我点击搜索按钮时，页面显然会重新加载，然后默认值功能也会运行，所以我得到了这两个值。

我需要的解决方案是：

由于我需要当前日期数据，我无法更改 onload 函数。
当我单击搜索按钮时，它应该采用所需的日期值而不是加载日期值，以便我可以将其作为参数传递给 ajax。

让我们考虑一个输入日期字段，并将这个输入日期字段设置为默认的ajax调用参数，以根据传递的参数获取特定的数据。

日期搜索.jsp

<html><body>
<input type="text" class="form-control input-sm datepicker" id="DtPicker">
<button type="button" id="Search" onclick=SearchDate()>Search</button
</body></html>

现在我从输入日期字段设置默认日期值 Onload，并从同一日期字段中选择所需的日期参数并单击搜索按钮，它应该将该首选参数传递给 ajax 参数而不是默认参数。

日期搜索.js

(function () {
    $.fn.dataTable.ext.errMode = 'none';
    $( "#srchVehDtPicker" ).datepicker({
        format: "yyyy-mm-dd",
        autoclose: true
    });

// Here i am setting default date value to var that is current date that is seeted on the input date field onload.

    var utc = new Date().toJSON().slice(0,10);
    document.getElementById("DtPicker").value =utc;

// calling ajax funtion with default parametr. 
attendance(utc);

}());

// On button click search funtion is called where selected date is collected passed to ajax as parameter
function SearchDate(){

// taking the value from input date value on button click.
    var searchdate = $("#DtPicker").val();
    var utc = searchdate.toString();

// calling ajax value with a value as a parameter.
    attendance(utc);
}

function attendance(utc){
    var url = "projecturl?utc="+utc;
        $.ajax({
            type : "GET",
            url : url,
            cache : false,  
            contentType: "text/plain",
            dataType: 'json',
            success : function(data) 
            {           
                AttendanceDetailsObj = data[0].Result;
                AttendanceList(AttendanceDetailsObj);

            }
    });
}

Attendance.java

这里我正在尝试根据传递的日期获取数据，并且我正在尝试获取大于等于传递日期的数据。

当默认日期被传递时，只有该日期数据不应该出现其他值。

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        JSONArray finalResultAry = new JSONArray();
        String utc = request.getParameter("utc");
        //String utc = "2020-04-29";

        JSONArray AttendanceDetailsRstAry = new JSONArray();
        JSONObject AttendanceDetailsObj = new JSONObject();
        ResultSet rs = null;
        Statement smt = null;

        try {

            DBConnect connect = new DBConnect();
            Connection connection = connect.connect();
            smt = connection.createStatement();

            String  attendanceselectallQry = "select * from Attendance where Plan_Date>='"+utc+"'";

            rs = smt.executeQuery(attendanceselectallQry);

                while (rs.next()) {
                    JSONObject AttendanceDetailsRstObj = new JSONObject();
                    AttendanceDetailsRstObj.put("Id",rs.getInt("Employee_ID"));
                    AttendanceDetailsRstObj.put("Name",rs.getString("Employee_Name"));
                    AttendanceDetailsRstObj.put("presenttype",rs.getString("Present_Type"));
                    AttendanceDetailsRstObj.put("plandate",rs.getString("Plan_Date"));
                    AttendanceDetailsRstObj.put("sanctionedon",rs.getString("Sanctioned_On"));
                    AttendanceDetailsRstObj.put("leaveot",rs.getString("Leave_OT"));
                    AttendanceDetailsRstAry.put(AttendanceDetailsRstObj);

                }
            AttendanceDetailsObj.put("Result", AttendanceDetailsRstAry);
            finalResultAry.put(AttendanceDetailsObj);

            smt.close();

        }catch (Exception e) {
            e.printStackTrace();
        }

        response.getWriter().write(finalResultAry.toString());

    }

【问题讨论】：

因为你已经使用ajax你的页面不应该重新加载，你也可以为你当前的代码做演示吗？
在同一页面上我有一个数据表视图，所以它会重新加载
谁能解决这个问题:)

标签： javascript jquery ajax date jsp

【解决方案1】：

你可以使用Window.localStorage来检查页面是否是第一次重新加载。通过使用这个你需要在localStorage中setItem来检查item是否被设置之后，您可以执行所需的操作。

因此，您的 jquery 代码将如下所示：

(function() {
  $.fn.dataTable.ext.errMode = 'none';
  $("#srchVehDtPicker").datepicker({
    format: "yyyy-mm-dd",
    autoclose: true
  });
  if (window.localStorage) { //checking   value in local storage
    if (!localStorage.getItem('firstLoad')) {
      //settting value in localstorage
      localStorage['firstLoad'] = true;
      var utc = new Date().toJSON().slice(0, 10);
      document.getElementById("DtPicker").value = utc;
      console.log("First time load");
      // calling ajax funtion with default parametr. 
      attendance(utc);
    } else {
      //do something 
      console.log("Not loaded first time");
    }
  }

}());

更新 1 ：正如我已经说过的，您可以使用 sessionStorage 来存储日期的值，并且每当您的页面重新加载时，检查存储的数据是否与日期的默认值（如果不同）取sessionStorage 值，否则取默认值。您的代码如下所示：

(function() {
  $.fn.dataTable.ext.errMode = 'none';
  $("#srchVehDtPicker").datepicker({
    format: "yyyy-mm-dd",
    autoclose: true
  });
  var utc = new Date().toJSON().slice(0, 10);
  document.getElementById("DtPicker").value = utc;
  //if there is some value in session
  if (window.sessionStorage) {
    //getting current value in sessionStorage
    var date_value = sessionStorage.getItem("date");
    //value fetch is equal to current date
    if (date_value == utc) {
      //setting current value 
      sessionStorage.setItem("date", utc);
      //calling function
      attendance(utc);

    } else if (date_value != utc) {
      //setting session storage with updated value
      sessionStorage.setItem("date", date_value);
    }


  } else {
    //onload setting session
    sessionStorage.setItem("date", utc);
    attendance(utc);
  }

}());

// On button click search funtion is called where selected date is collected passed to ajax as parameter
function SearchDate() {

  // taking the value from input date value on button click.
  var searchdate = $("#DtPicker").val();
  var utc = searchdate.toString();
  //setting value in session
  sessionStorage.setItem("date", utc)
  // calling ajax value with a value as a parameter.
  attendance(utc);
}

（以上代码未经测试，但应该可以工作。如有任何语法错误，请见谅）

【讨论】：

当我单击搜索按钮时，页面会重新加载并获取要显示的新数据，其中包括默认参数和搜索参数。正如我所说，如果我使用 window.localStorage 它不会工作，window.storage 的范围是直到页面重新加载for details。
我首先想要的是当我打开一个页面时，它应该使用默认参数当前日期（日期文本框 #srchVehDtPicker 值：1）加载数据，然后如果我选择不同的日期（日期文本框#srchVehDtPicker value:2) 和 search(search button) 现在我应该只获取 value2 数据，应该显示。问题是：当我搜索页面由于某种原因重新加载时，默认参数和搜索值参数正在通过 ajax 并获取数据
您可以将date 存储在sessionStorage 中，并且每当您的页面重新加载时，检查存储数据是否与日期的默认值不同，如果不同则取sessionStorage 值，否则取default 值跨度>
@Sati 给我一些例子
我已经更新了我的代码测试它，让我知道它是否适合你。