JavaScript如何在HTML加载及输入值变化时获取输入框值

你当前的代码仅在页面加载阶段触发onreadystatechange回调时，读取了一次输入框的初始值并发送请求，既没有给输入框绑定值变更的监听事件，也没有在值变化后重新读取最新值发起请求，自然无法同步更新后的数据。

核心改动分三点：

• 把传值的ajax逻辑抽成独立公共函数，避免重复写代码，每次调用函数时实时从DOM读取输入框最新值，不要用页面加载时存的固定变量（固定变量存的是加载时的数值快照，不会自动更新）
• 页面加载完成后调用一次公共函数，完成初始值传递
• 给两个日期输入框绑定change事件，当用户修改完日期确认后，自动调用公共函数传递最新值

<input type="date" id="start-date" name="start-date" value="2019-10-10"/>
<label for="date">to</label>
<input type="date" id="end-date" name="end-date" value="2020-05-10"/>

<script>
// 抽离公共传值函数，每次调用都实时取最新输入值
function syncDateToBackend() {
  // 每次执行都重新获取输入框当前值，不要提前存固定变量复用
  const startDate = document.getElementById("start-date").value;
  const endDate = document.getElementById("end-date").value;

  $.ajax({
    url: "/dates",
    type: "GET",
    data: {
      start_date: startDate,
      end_date: endDate,
    },
    // 可选：加回调方便调试
    success: function(res) {
      console.log("日期同步成功", res);
    },
    error: function(err) {
      console.log("日期同步失败", err);
    }
  });
}

// 页面DOM加载完成后，执行一次初始值同步
document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    syncDateToBackend();
  }
};

// 给两个日期框绑定变更监听，值修改后自动同步
document.getElementById("start-date").addEventListener("change", syncDateToBackend);
document.getElementById("end-date").addEventListener("change", syncDateToBackend);
</script>

• 如果需要用户选择日期的过程中实时同步值（不需要等确认选择、失焦），可以把监听的change事件换成input事件
• 新手常见坑：不要在页面初始化时把输入框值存到全局变量里复用，这个变量存的是初始化时的字符串快照，不会跟着输入框内容自动更新，每次传值前重新从DOM读取最新值是最稳妥的实现方式

内容的提问来源于stack exchange，提问作者JA-pythonista