如何不通过AJAX调用实现Node.js向HTML传递数据？

没问题！不用AJAX完全可以通过原生HTML表单的action属性把数据提交到Node.js后端，我给你一步步拆解具体实现：

前端表单配置 #

首先要确保你的HTML表单正确设置action（指向Node.js的接口路径）、method（推荐用POST，更安全），并且给所有需要提交的表单元素加上name属性——后端就是通过这个name来对应获取数据的。

普通文本表单示例 #

<form action="/submit-user-data" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">提交数据</button>
</form>

注：如果是默认的文本/表单数据，enctype="application/x-www-form-urlencoded"可以省略，浏览器会自动用这个格式提交。

带文件上传的表单示例 #

如果需要上传文件，要把enctype设为multipart/form-data：

<form action="/upload-file" method="POST" enctype="multipart/form-data">
  <input type="file" name="userAvatar" required>
  <button type="submit">上传头像</button>
</form>

Node.js后端处理（以Express框架为例） #

Node.js生态里最常用的Web框架是Express，以下是对应两种表单类型的处理代码：

1. 处理普通文本表单数据 #

首先安装Express：

npm install express

然后编写后端代码：

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

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

// 处理表单提交的POST请求
app.post('/submit-user-data', (req, res) => {
  // 通过req.body获取表单数据，对应前端input的name属性
  const { username, email } = req.body;
  
  // 这里可以写你的业务逻辑：比如存数据库、验证数据等
  console.log(`收到用户数据：用户名=${username}，邮箱=${email}`);
  
  // 处理完后可以重定向到结果页面，或者返回提示HTML
  res.send(`<h1>提交成功！</h1><p>用户名：${username}</p><p>邮箱：${email}</p>`);
});

app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

2. 处理带文件上传的表单数据 #

需要额外安装multer中间件来解析multipart/form-data格式：

npm install multer

后端代码示例：

const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

// 配置multer，指定文件存储路径（这里存在项目根目录的uploads文件夹）
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads');
  },
  filename: (req, file, cb) => {
    // 自定义文件名，避免重复
    cb(null, Date.now() + '-' + file.originalname);
  }
});
const upload = multer({ storage: storage });

// 处理文件上传的POST请求，upload.single('userAvatar')对应前端input的name属性
app.post('/upload-file', upload.single('userAvatar'), (req, res) => {
  // req.file里是上传的文件信息，req.body里是其他表单字段（如果有的话）
  console.log('上传的文件信息：', req.file);
  
  res.send('<h1>文件上传成功！</h1>');
});

app.listen(port, () => {
  console.log(`后端服务运行在 http://localhost:${port}`);
});

额外小提示 #

• 如果提交表单后不想刷新整个页面，但又不能用AJAX，可以把表单的target属性设为一个隐藏的<iframe>，这样提交动作会在iframe里完成，主页面保持不变：

<iframe name="hiddenFrame" style="display: none;"></iframe>
<form action="/submit-user-data" method="POST" target="hiddenFrame">
  <!-- 表单内容 -->
</form>

• 如果用GET方法提交，数据会附在URL的查询参数里，后端需要用req.query来获取，不过GET不适合传递敏感或大量数据，一般推荐用POST。

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