我来帮你梳理下这个表单提交功能的问题，主要有几个关键细节没处理对，咱们一步步修正：

核心问题分析 #

1. 输入值获取时机错误
   你现在是在页面刚加载时就获取了email.value并赋值给formattedemail，但这时候用户还没输入任何内容，所以点击按钮时用的始终是初始的空值，根本没拿到用户实际输入的内容。必须把获取输入值的逻辑放到点击事件/提交事件内部。

2. 邮箱点替换不彻底
   你用的replace(/\./, '-')只会替换邮箱里的第一个点，比如test.user@email.com会变成test-user@email.com，后面的点还留在那，得加全局标识g才能替换所有点：replace(/\./g, '-')。

3. 请求方式与数据传递不规范
   把用户输入拼在URL路径里用GET请求传递，不仅容易因为特殊字符导致URL失效，也不符合表单提交的常规做法（POST请求+请求体传递数据更安全、规范），而且如果你的Express服务器路由是期望接收POST数据的，这就完全不匹配了。

4. 缺少错误处理
   你的fetch调用没有处理网络失败、服务器错误等情况，出问题时根本不知道哪里错了。

修正后的完整代码 #

HTML+JS部分 #

<h1 align="center">Form</h1>
<!-- 加上form标签更符合标准，也方便绑定提交事件 -->
<form id="submitForm">
  <input type="email" placeholder="person@email.com" id="email" required> <br>
  <input type="text" id="username" placeholder="person" required> <br>
  <button type="submit">Submit</button>
</form>

<script type="text/javascript">
// 绑定表单的submit事件，比按钮onclick更符合表单行为逻辑
document.getElementById('submitForm').addEventListener('submit', async function(e) {
  // 阻止表单默认的页面跳转行为
  e.preventDefault();

  // 点击提交时才获取最新的用户输入值
  const email = document.getElementById('email').value;
  const username = document.getElementById('username').value;
  // 全局替换邮箱里的所有点
  const formattedEmail = email.replace(/\./g, '-');

  try {
    // 用POST请求发送数据，把数据放在JSON请求体里
    const response = await fetch('https://exampleserver.com/inputform', {
      method: 'POST',
      // 告诉服务器我们发送的是JSON格式
      headers: {
        'Content-Type': 'application/json',
      },
      // 把数据转成JSON字符串
      body: JSON.stringify({
        email: formattedEmail,
        username: username
      })
    });

    // 检查服务器返回的状态码，非2xx都算错误
    if (!response.ok) {
      throw new Error(`服务器错误: ${response.status}`);
    }

    const result = await response.json();
    console.log('提交成功:', result);
    // 这里可以加提交成功后的提示，比如alert('提交成功！')
  } catch (error) {
    // 捕获网络错误或服务器错误
    console.error('提交失败:', error);
    // 也可以给用户显示错误提示
  }
});
</script>

对应Express服务器路由（参考） #

如果你的服务器之前没配置接收POST JSON数据，需要加上express.json()中间件，路由写法如下：

const express = require('express');
const app = express();

// 解析JSON格式的请求体
app.use(express.json());

// 接收POST请求的路由
app.post('/inputform', (req, res) => {
  // 从请求体里拿到前端发送的数据
  const { email, username } = req.body;
  
  // 这里写你的业务逻辑，比如存数据库、验证等
  console.log('收到表单数据:', email, username);
  
  // 返回给前端成功响应
  res.json({ status: 'success', message: '数据提交成功' });
});

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

可选优化点 #

• 如果你的服务器确实需要用GET请求+路径参数的方式，那也要把获取输入值的逻辑放到函数内部，并且用encodeURIComponent()处理用户输入，防止特殊字符破坏URL：

  const fetchUrl = `https://exampleserver.com/inputform/${encodeURIComponent(formattedEmail)}/${encodeURIComponent(username)}`;
  const response = await fetch(fetchUrl);
  

• 可以给输入框加前端校验，比如邮箱格式校验，提升用户体验。

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