如何在外部JavaScript中获取HTML表单数据以运行主脚本？

嘿，我来帮你搞定这个问题！首先得说明一下：你现在把表单的action设为scripts/Main.js，用post方法提交，这种方式是行不通的——浏览器会直接把表单数据发送到这个JS文件，但普通的前端JS文件没法直接处理POST请求，它只会被当作静态文件返回，根本不会执行里面的逻辑来接收数据。咱们得换个思路来获取输入值，分两种场景给你讲：

场景一：纯前端处理数据（不需要后端） #

这种情况我们要监听表单的提交事件，阻止浏览器默认的提交行为，然后直接从输入框里拿值。

第一步：修改表单代码 #

给表单加个ID方便JS获取，也可以去掉action和method（或者保留也没关系，后面会阻止默认行为）：

<form id="userInfoForm">
  <label> Enter Pin: </label>
  <input type="text" id="pin" name="pin" /> <br>
  <label> Enter Username: </label>
  <input type="text" id="name" name="user_name" />
  <button type="submit"> Submit Info </button>
</form>

第二步：在Main.js里编写逻辑 #

用事件监听来捕获提交动作，然后获取输入值：

// 先拿到表单元素
const userForm = document.getElementById('userInfoForm');

// 监听表单的提交事件
userForm.addEventListener('submit', function(event) {
  // 关键：阻止浏览器默认的提交跳转行为
  event.preventDefault();

  // 获取两个输入框的值
  const inputPin = document.getElementById('pin').value;
  const inputUserName = document.getElementById('name').value;

  // 现在你就可以用这些值来运行主脚本了！
  console.log('用户输入的Pin:', inputPin);
  console.log('用户输入的用户名:', inputUserName);

  // 比如调用你的主处理函数
  handleUserInput(inputPin, inputUserName);
});

// 假设这是你的主脚本逻辑函数
function handleUserInput(pin, userName) {
  // 这里可以写你的业务逻辑，比如验证数据、做计算等等
  if (pin.trim() && userName.trim()) {
    alert(`嗨，${userName}！你的Pin已确认：${pin}`);
  } else {
    alert('请把Pin和用户名都填完整哦！');
  }
}

场景二：需要后端处理数据（比如Node.js） #

如果你的Main.js是后端脚本，那得用后端框架来接收POST过来的表单数据，比如用Express：

后端代码（Main.js） #

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

// 配置解析表单数据的中间件
app.use(express.urlencoded({ extended: true }));

// 处理表单提交的POST请求
app.post('/submit-user-info', (req, res) => {
  // 从req.body里获取表单数据，name属性对应这里的键名
  const pin = req.body.pin;
  const userName = req.body.user_name;

  // 在这里处理数据，比如存数据库、验证权限等等
  console.log('后端收到的Pin:', pin);
  console.log('后端收到的用户名:', userName);

  // 给前端返回响应
  res.send(`已成功接收你的信息：用户名 ${userName}，Pin ${pin}`);
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器在http://localhost:3000运行啦');
});

对应前端表单修改 #

把表单的action设为后端的路由地址，method保持post：

<form action="/submit-user-info" method="post">
  <label> Enter Pin: </label>
  <input type="text" id="pin" name="pin" /> <br>
  <label> Enter Username: </label>
  <input type="text" id="name" name="user_name" />
  <button type="submit"> Submit Info </button>
</form>

这样提交表单后，后端就能拿到数据并处理啦！

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