如何从html表单接收数据

Question

与我在编程中所经历的一切一样，我确信这是一个简单的解决方法，只是某个地方的语法问题，但我一直试图让它工作太久。

我在contact.html 页面中创建了一个联系表单。我找到了许多关于如何将表单中的数据保存到文件（JSON 格式）中的示例，但是在我的代码中某处有些问题。这是我第一次接触 Python 以外的任何东西，我也不是很擅长。

我试过用：

<form id="contactForm" method="POST" action="contact">

在我的 index.js 文件中，我有很多变体，但最近的是：

app.post('/contact.html', (req, res) => {
return res.send(req.body);
console.log('Data: ', req.body,first);
});

我目前有一个脚本，addData.js，它将表单数据保存在 localStorage 中。当我在浏览器中查看开发人员工具 > 应用程序 > 本地存储时，我可以看到它。

function onSubmit() {

    var contactData = [];
    var fName = document.getElementById("first").value;
    var lName = document.getElementById("last").value;
    var adDre = document.getElementById("address").value;
    var pho = document.getElementById("phone").value;
    var eMail = document.getElementById("email").value;
    var webSite = document.getElementById("website").value;
    var comm = document.getElementById("comments").value;


    var stuObj = {first:fName, last:lName, address:adDre, phone:pho, email:eMail, website:webSite, comments:comm};
    
    localStorage.contactRecord = JSON.stringify(stuObj);
    // console.log(localStorage.contactRecord);
    
    var jsonString = localStorage.getItem("contactRecord");

    var retrieveObject = JSON.parse(jsonString);
    // console.log(retrieveObject.email);

    return retrieveObject.email;
}

我在我的“脚本”文件夹中创建了一个不同的脚本，并且可以使用上述脚本调用数据：

  var returnEmail=onSubmit();
  console.log(returnEmail);

我正在尝试从我的根文件夹中的 index.js 访问它以使用 NodeMailer。关键是要获取填写表单的人的姓名和电子邮件地址，以便在他们提交表单后发送“谢谢”电子邮件。

请对我放轻松。这是我的第一个问题，我确信在发布此问题时我做错了。我自己努力寻找答案，但没有找到任何与我正在做的事情相匹配或可以将其与我正在尝试做的事情联系起来的东西。

这是我的 index.js 文件的副本：

const express = require('express');
const http = require('http');
const fs = require('fs');
const url = require('url');
const nodemailer = require('nodemailer');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();

app.use(express.static(__dirname));
app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.static('public'));
app.use('/static', express.static(path.join(__dirname, 'public')));
app.use(express.static('pages'));
app.use('/static', express.static(path.join(__dirname, 'pages')));

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/index.htm'));
    // res.sendFile(path.join(__dirname + '/pages/contact.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
    // console.log("Hello World");
});

var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded({extended: false});

app.post('/contact', (req, res) => {
    return res.send(req.body);
    console.log('Data: ', req.body.first);
});

Answer 1

你的行动应该是：

<form id="contactForm" method="POST" action="/contact">

由于您似乎使用 urlencoded 作为您的 enctype（这是默认值），请确保您也在使用某些东西来解析它（服务器端）。

你可以添加这个（在 app.post 上方）（npm install body-parser）

const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: true }))

您在 nodejs 服务器上的帖子需要与您的操作相匹配：

app.post('/contact', (req, res) => {
    console.log('Data: ', req.query.first);
    return res.send(req.query);
});