如何将表单文本传入JavaScript API请求？

你可以通过以下步骤把表单输入内容传入API调用：

• 给表单添加提交事件监听器，阻止表单默认的页面刷新行为
• 获取输入框中的用户输入内容
• 对输入内容做URL编码处理（避免空格、特殊字符导致请求错误），拼接成完整的API请求地址后发起fetch调用

完整代码示例 #

<form id="form">
  <input type="text" id="query" name="keyw">
  <button>Search</button>
</form>

<script>
// 获取表单元素
const form = document.getElementById('form');

// 监听表单提交事件
form.addEventListener('submit', function(event) {
  // 阻止表单默认提交行为（避免页面刷新）
  event.preventDefault();
  
  // 获取输入框的用户输入值
  const userInput = document.getElementById('query').value;
  
  // 对输入内容做URL编码，拼接成合法的API请求地址
  const apiUrl = `https://example.com/search?keyw=${encodeURIComponent(userInput)}`;
  
  // 发起API请求并处理响应
  fetch(apiUrl)
    .then((response) => response.json())
    .then((data) => {
      // 这里可以添加对返回数据的业务处理，比如渲染到页面
      console.log('请求返回数据:', data);
    })
    .catch((error) => {
      // 捕获并处理请求异常
      console.error('请求出错:', error);
    });
});
</script>

关键细节说明 #

• event.preventDefault()：必须添加这一行，否则表单提交后会触发页面跳转，后续JS逻辑无法执行
• encodeURIComponent(userInput)：对用户输入的文本做URL编码，比如把空格转成%20，确保特殊字符不会破坏API请求的格式
• 可根据实际需求修改then回调里的逻辑，比如把返回数据渲染到页面指定位置

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