如何让JavaScript在输入框输入数字时立即发送HTTP GET请求？

你的问题在于change事件仅在输入框失去焦点且内容修改时才触发，要实现输入时实时发送请求，核心是替换事件类型，再做必要优化：

1. 用input事件替代change事件 #

input事件会在输入框内容发生任何变化时立即触发，包括键盘输入、粘贴、鼠标拖拽输入等场景，完美适配实时触发的需求。

同时修正原代码里的拼写错误（cconverted应为converted），并加入基础的错误处理：

修正后的完整代码 #

HTML（无需修改）

<input id="total" name="total" type="number" required>
<span id="converted"></span>

JavaScript

const total = document.getElementById("total");
const converted = document.getElementById("converted");

total.addEventListener("input", function() {
  // 空值时清空结果，避免无效请求
  if (!this.value.trim()) {
    converted.textContent = "";
    return;
  }

  fetch(`http://localhost:8000/api/convert/${this.value}`)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP错误：${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      converted.textContent = data.converted;
    })
    .catch(error => {
      console.error('转换请求失败:', error);
      converted.textContent = '转换失败，请重试';
    });
});

2. 优化：添加防抖减少频繁请求 #

如果用户快速输入，input事件会短时间内触发多次，导致大量请求发送到服务器。添加防抖函数可以延迟请求执行，直到用户停止输入一段时间（比如300ms），有效降低服务器压力：

const total = document.getElementById("total");
const converted = document.getElementById("converted");

// 防抖函数：延迟执行目标函数，避免频繁触发
function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 封装转换请求逻辑
function handleConversion(value) {
  if (!value.trim()) {
    converted.textContent = "";
    return;
  }

  fetch(`http://localhost:8000/api/convert/${value}`)
    .then(response => {
      if (!response.ok) throw new Error(`HTTP错误：${response.status}`);
      return response.json();
    })
    .then(data => converted.textContent = data.converted)
    .catch(err => {
      console.error('请求出错:', err);
      converted.textContent = '转换失败，请重试';
    });
}

// 绑定防抖后的事件处理函数
total.addEventListener("input", debounce(function() {
  handleConversion(this.value);
}, 300));

补充说明 #

• input事件兼容性极佳，支持所有现代浏览器及IE9以上版本；
• 使用textContent替代innerHTML更安全，避免XSS风险（如果返回的转换结果是纯文本的话）；
• 防抖延迟时间可根据业务需求调整，通常200-500ms比较合适。

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