如何從 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);
});