如何设置默认日期参数以传递给 JavaScript 中的 ajax get 调用，在选择日期值时它应该更改
Posted
技术标签:
【中文标题】如何设置默认日期参数以传递给 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 【发布时间】：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你的页面不应该重新加载，你也可以为你当前的代码做演示吗？
在同一页面上我有一个数据表视图，所以它会重新加载
谁能解决这个问题:)
【参考方案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 给我一些例子
我已经更新了我的代码测试它，让我知道它是否适合你。以上是关于如何设置默认日期参数以传递给 JavaScript 中的 ajax get 调用，在选择日期值时它应该更改的主要内容，如果未能解决你的问题，请参考以下文章
如何将单击的文件完整路径传递给设置为默认程序以打开某些特定文件类型的批处理命令快捷方式
s-s-rS 动态 - 如果父参数被隐藏，则父参数不会传递给子参数
如何减少从插入符号传递给 RF 的默认 ntree=500 参数？