无法将表单数据传递至Node.js服务器问题求助

你的问题根源在于表单提交方式与服务器解析中间件不匹配，同时前端JavaScript逻辑未被正确加载，导致表单以默认格式提交，服务器无法解析数据。

核心问题点 #

1. HTML未引入app.js：你的HTML文件没有添加<script>标签引入app.js，所以addTask函数的表单提交监听和e.preventDefault()完全没生效。表单会以浏览器默认的application/x-www-form-urlencoded格式发送请求，但服务器只配置了解析JSON的express.json()中间件，无法解析这种格式，因此req.body为空对象。
2. 重复请求触发：终端里的两次请求日志，一次是表单默认提交（空对象），另一次是未正确加载逻辑导致的无效请求。

解决方案（二选一即可） #

方案1：使用表单默认提交（无需前端fetch逻辑） #

直接让表单按默认格式提交，服务器添加对应解析中间件：

1. 修改server.js：添加解析application/x-www-form-urlencoded格式的中间件

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
const path = require('path');

// 同时添加JSON和urlencoded解析中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true })); // 新增这行

// 提供首页和表单页面路由
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'homepage.html'));
});
app.get('/task-form', (req, res) => {
  res.sendFile(path.join(__dirname, 'task-form.html')); // 假设你的表单文件名为task-form.html
});

// POST接口处理表单数据
app.post('/store-task', (req, res) => {
    try {
        const taskData = req.body;
        console.log('Received task data:', taskData);
  
        if (!taskData || Object.keys(taskData).length === 0) {
          throw new Error('Invalid task data');
        }
  
        // 后续可添加数据库存储等逻辑
  
        res.sendStatus(200);
    } catch (error) {
        console.error('Error processing task data:', error);
        res.status(500).send('Internal server error');
    }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

2. 访问方式：通过http://localhost:3000/task-form打开表单页面（必须通过服务器加载，不能直接双击本地HTML文件），填写后提交即可在终端看到完整数据。

方案2：使用fetch提交JSON（保留前端JavaScript逻辑） #

确保前端逻辑生效，阻止表单默认提交，用JSON格式发送数据：

1. 修改HTML：在</body>标签前添加引入app.js的脚本

<!-- 原有第三方脚本 -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- 新增：引入你的app.js -->
<script src="app.js"></script>
</body>

2. 完善app.js的Materialize组件初始化：页面中的下拉选择框需要初始化才能获取选中值，在loadEventListener函数中添加：

function loadEventListener() {
  // 原有事件监听...
  // 初始化Materialize下拉菜单
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    M.FormSelect.init(elems);
  });
}

3. 访问方式：同样通过http://localhost:3000/task-form打开表单页面，提交后addTask函数会触发，用JSON格式发送数据，服务器可正确解析req.body。

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