在不使用表单控件直接从HTTP GET API检索数据并向表单传递默认的开始和结束日期时,可以通过以下几种方法实现:
以下是使用JavaScript从API获取数据并设置表单默认日期的示例:
<form id="dateForm">
<input type="text" id="startDate" name="startDate" readonly>
<input type="text" id="endDate" name="endDate" readonly>
</form>
document.addEventListener('DOMContentLoaded', function() {
fetch('https://api.example.com/get-dates') // 替换为实际API地址
.then(response => response.json())
.then(data => {
const { startDate, endDate } = data;
document.getElementById('startDate').value = startDate;
document.getElementById('endDate').value = endDate;
})
.catch(error => console.error('Error fetching dates:', error));
});
如果需要通过URL传递这些日期参数,可以在页面加载时解析URL参数并设置表单值:
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
const results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
document.addEventListener('DOMContentLoaded', function() {
const startDate = getParameterByName('startDate');
const endDate = getParameterByName('endDate');
if (startDate) document.getElementById('startDate').value = startDate;
if (endDate) document.getElementById('endDate').value = endDate;
});
通过上述方法,可以在不直接使用表单控件提交数据的情况下,有效地从API获取并设置表单的默认日期值。
没有搜到相关的文章