无法在输出框显示结果及无form标签时Fetch请求失效求助

开发者阿泽

2026-7-10

问题解决方案

问题1：提交后页面刷新，结果显示在空白页

这是因为表单默认提交行为会触发页面跳转/刷新，解决核心是阻止默认行为：

如果保留form标签，在submit事件回调里调用event.preventDefault()
或者把按钮类型从submit改为button，避免触发表单默认提交逻辑

示例代码片段：

// 监听form的submit事件时阻止默认行为
document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault(); // 关键：阻止页面刷新
  // 发送请求并处理结果
  const formData = new FormData(e.target);
  const response = await fetch('/your-api-url', {
    method: 'POST',
    body: formData
  });
  const result = await response.text();
  // 将结果插入到output-box中
  document.getElementById('output-box').innerHTML = result;
});

问题2：移除form标签后Fetch请求无法触发

原来的请求触发依赖form的submit事件，移除form后需要换触发方式，直接绑定按钮的click事件即可：

给按钮添加click事件监听
手动收集输入数据（通过DOM选择器获取输入框值），构造请求体发送

示例代码片段：

// 绑定按钮的click事件触发请求
document.getElementById('submit-btn').addEventListener('click', async () => {
  // 手动收集输入数据
  const inputValue = document.getElementById('test-input').value;
  // 构造请求体（根据后端要求选择FormData或JSON格式）
  const requestBody = new FormData();
  requestBody.append('data', inputValue);
  
  // 发送POST请求
  const response = await fetch('/your-api-url', {
    method: 'POST',
    body: requestBody
  });
  const result = await response.text();
  // 展示结果到output-box
  document.getElementById('output-box').innerHTML = result;
});