如何实现按钮提交表单数据至服务器且不刷新页面？

你遇到的核心问题是传统表单提交会触发页面刷新，而type="button"本身不会触发表单提交。最直接的解决方式是用**异步请求（Fetch API）**替代表单提交，这样既能发送数据到服务器，又能在当前页面处理返回结果，完全避免页面刷新。

步骤1：简化HTML结构 #

那个隐藏按钮可以直接移除，不需要通过触发按钮来提交，直接在select的change事件里处理请求：

<form id="selectedScript">
  <label for="script">Choose a script:</label>
  <select name="script" id="script">
    <option value="main" selected>Main</option>
    <option value="main2">Main2</option>
  </select>
</form>

步骤2：修改JS代码，用Fetch发送异步请求 #

在用户确认后，直接获取select的选中值，通过Fetch API发送POST请求，同时处理服务器返回的数据：

const selectedScript = document.getElementById('selectedScript');
const inputBox = document.getElementById('inputBox');
const outputBox = document.getElementById('outputBox');

selectedScript.addEventListener("change", () => {
  if (confirm("Are you sure you want to change the script? This will clear the current text from input box")) {
    inputBox.value = "";
    outputBox.value = "";
    
    // 获取select选中值
    const scriptValue = document.getElementById('script').value;
    
    // 发送异步POST请求
    fetch('/playground/scriptBtn', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `script=${encodeURIComponent(scriptValue)}` // 编码参数避免特殊字符问题
    })
    .then(response => response.json()) // 按后端返回格式调整，比如text()
    .then(data => {
      // 这里处理服务器返回的数据，比如更新页面内容
      console.log('服务器返回数据:', data);
      // 示例：将返回内容填充到输出框
      // outputBox.value = data.scriptContent;
    })
    .catch(error => {
      console.error('请求出错:', error);
    });
  }
});

步骤3：调整后端代码，返回有效数据 #

你的后端目前仅执行res.end()，需要返回前端可处理的结构化数据（比如JSON），这样前端才能拿到对应数据在页面使用：

router.route('/playground/scriptBtn')
.post((req, res) => {
  console.log('收到的脚本参数:', req.body.script);
  // 根据参数逻辑生成对应数据
  const responseData = {
    message: '请求成功',
    scriptContent: req.body.script === 'main' ? '主脚本内容' : '备用脚本内容'
  };
  res.json(responseData); // 返回JSON格式数据
})

方案优势 #

• Fetch API是浏览器原生支持的异步请求方式，无需依赖第三方库，能在不刷新页面的情况下与服务器通信。
• 直接在select的change事件中处理请求，省去触发隐藏按钮的冗余步骤。
• 通过设置正确的请求头和参数编码，确保后端能正确接收数据，前端能解析返回结果。

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