Javascript 如何从html表单接收数据

Javascript 如何从html表单接收数据,javascript,html,node.js,json,express,Javascript,Html,Node.js,Json,Express,正如我在编程方面所经历的一切一样,我确信这是一个很容易解决的问题,只是某个地方的语法问题,但我一直试图让它工作太久了 我在contact.html页面中创建了一个联系人表单。我已经找到了许多关于如何将表单中的数据保存到文件(JSON格式)的示例,但是我的代码中的某些地方出了问题。这是我第一次接触Python之外的任何东西,我对它也不是很在行 我尝试使用: <form id="contactForm" method="POST" action=&quo

正如我在编程方面所经历的一切一样,我确信这是一个很容易解决的问题,只是某个地方的语法问题,但我一直试图让它工作太久了

我在contact.html页面中创建了一个联系人表单。我已经找到了许多关于如何将表单中的数据保存到文件(JSON格式)的示例,但是我的代码中的某些地方出了问题。这是我第一次接触Python之外的任何东西,我对它也不是很在行

我尝试使用:

<form id="contactForm" method="POST" action="contact">
我目前有一个脚本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;
}
我在“scripts”文件夹中创建了一个不同的脚本,可以使用以下命令调用上述脚本中的数据:

  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);
});
你的行动应该是:

<form id="contactForm" method="POST" action="/contact">
您在nodejs服务器上的帖子需要与您的操作相匹配:

app.post('/contact', (req, res) => {
    console.log('Data: ', req.query.first);
    return res.send(req.query);
});
你的行动应该是:

<form id="contactForm" method="POST" action="/contact">
您在nodejs服务器上的帖子需要与您的操作相匹配:

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

不确定这是否能解决OP的问题,但这肯定是第一步。是的,这个问题有点宽泛,缺少表单的实际内容。所以他们在使用“姓名”和“身份证”时可能会遇到问题。我实际上既有“姓名”又有“身份证”。。。我是根据最后一句话猜的,我不应该两者兼得?如果有帮助的话,我可以把我的“contact.html”cod连同完整的表格一起发布。我只是不想有一个巨大的帖子。两者都有是好的,但是你需要在body/query中提交表单数据的名称。我确实有“name”。不确定这是否能解决OP的问题,但这肯定是第一步。是的,这个问题有点宽泛,缺少表单的实际内容。所以他们在使用“姓名”和“身份证”时可能会遇到问题。我实际上既有“姓名”又有“身份证”。。。我是根据最后一句话猜的,我不应该两者兼得?如果有帮助的话,我可以把我的“contact.html”cod连同完整的表格一起发布。我只是不想有一个巨大的帖子。两者都有是好的,但是你需要在body/query中提交表单数据的名称。我确实有“name”。我不确定我是否理解你的问题。你具体被困在哪里了?在我的主index.js文件中将姓名和电子邮件从表单发送到我的Nodemailer部分。在你的
/contact
路线中的return语句之后,你的
控制台.log
将永远不会被呼叫。我不确定我是否理解你的问题。你具体被困在哪里了?在我的主index.js文件中将姓名和电子邮件从表单发送到我的Nodemailer部分。在你的
/contact
路线中的return语句之后,你的
console.log
将永远不会被调用。