如何用Thymeleaf将输入框日期作为请求参数传入下载链接？

Thymeleaf是服务端渲染引擎，页面加载时th:href里的日期参数就已经被渲染成静态字符串。用户修改前端日期输入框后，服务端不会自动重新生成链接参数，所以链接里的日期不会跟着更新。

通过JavaScript监听日期输入框的变化，动态更新下载链接的参数。具体步骤如下：

1. 修正Thymeleaf模板 #

• 修复Thymeleaf命名空间的拼写错误（wwww改为www）
• 移除重复的th:value（th:field会自动绑定值并生成正确的name/value属性）
• 给日期输入框和下载链接添加ID，方便JS操作

修改后的模板代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
  <div>
    <input type="date" th:field="${inputs.start}" id="startDate" />
    <input type="date" th:field="${inputs.end}" id="endDate" />
  </div>

  <a id="downloadLink" th:href="@{|/reporting/download?start=${inputs.start}&end=${inputs.end}|}">
    <h3>Download</h3>
  </a>

  <script>
    // 获取页面元素
    const startInput = document.getElementById('startDate');
    const endInput = document.getElementById('endDate');
    const downloadLink = document.getElementById('downloadLink');
    
    // 定义更新下载链接的函数
    function updateDownloadLink() {
      const start = startInput.value;
      const end = endInput.value;
      // 拼接新的下载URL并赋值
      downloadLink.href = `/reporting/download?start=${start}&end=${end}`;
    }
    
    // 监听输入框的变化事件，实时更新链接
    startInput.addEventListener('change', updateDownloadLink);
    endInput.addEventListener('change', updateDownloadLink);
  </script>
</body>
</html>

2. 额外代码修正 #

• 控制器下载接口路径是/reporting/download，原模板中写的是/reports/download，已在上述代码中统一，确保路径一致。
• DateInputs类里的Public需改为小写public，避免Java编译错误。

当用户修改日期输入框时，JS的change事件会触发updateDownloadLink函数，获取输入框的最新值，重新拼接下载URL并覆盖链接的href属性，从而实现参数的实时同步更新。

内容的提问来源于stack exchange，提问作者ser_jordan14