将变量从html提交传递到nodejs服务器端

Question

我现在正在练习使用 NodeJS 和 html 制作自己的本地服务器。

我想使用 web 从前端获取一些输入并将所有变量传递到 NodeJS 服务器端，然后运行 ​​python 程序将这些变量存储到我的数据库中。 我正在使用 POST 方法，因为我将一些值存储到数据库中。（如果我做错了，请纠正我。）

我正在尝试使用 data.html 中的输入标记从前端的用户那里获取输入。 以下是我正在尝试做的部分。 http://localhost:8080/data 是我的 url 地址，我采用了两个值，第一个称为“name”，第二个称为“ssn”。

<form action="http://localhost:8080/data/name/:name/ssn/:ssn" method="post" id="signup">
    <h1>Personal info post example</h1>
    <div class="field">
        <label for="name">Name:</label>
        <input type="text" id="name" placeholder="Enter your fullname" />
        <small></small>
    </div>
    <div class="field">
        <label for="ssn">SSN:</label>
        <input type="text" id="ssn" placeholder="Enter your SSN" />
        <small></small>
    </div>
    <button type="submit">Submit</button><br><br>
</form>

下面是我的 server.js 部分。 我试图打印出我能想到的一切。 我也把结果写成 cmets。 这是我输入“a”作为名称并输入“b”作为 ssn 并提交时的结果。

app.post('/data/name/:name/ssn/:ssn', function(req, res) {
    console.log('req.query: ', req.query); // {}
    console.log('req.query.name: ',req.query.name); // undefined
    console.log('req.query.ssn: ',req.query.ssn); // undefined
    console.log('req.params: ',req.params); // { name: ':name', ssn: ':ssn' }
    console.log('req.params.name: ',req.params.name); // :name
    console.log('req.params.ssn: ',req.params.ssn); // :ssn
});

当我在搜索框中输入“a”和“b”并点击提交按钮时，Web 浏览器开始加载但永远不会结束，我的 VSC 会显示结果。 谁能帮我解决我需要解决的问题？

Answer 1

看起来您正在混合使用 req.params 和 req.query，而实际上您需要 req.body

试试这个：

将此添加到 server.js（您需要安装 body-parser）：

const bodyParser = require('body-parser');

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// parse application/json
app.use(bodyParser.json());

app.post('/data', function(req, res) {
    console.log('req.body: ', req.body);

    const {name, ssn} = req.body;
    console.log('name: ', name);
    console.log('ssn: ', ssn);
    res.json(req.body);
});

并更改 HTML 表单（添加 name 属性，这是您的数据）：

<form action="http://localhost:8080/data" method="post" id="signup">
    <h1>Personal info post example</h1>
    <div class="field">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Enter your fullname" />
        <small></small>
    </div>
    <div class="field">
        <label for="ssn">SSN:</label>
        <input type="text" id="ssn" name="ssn" placeholder="Enter your SSN" />
        <small></small>
    </div>
    <button type="submit">Submit</button><br><br>
</form>

Answer 2

你的代码很好。但是您遇到了这个问题，因为服务器在提交后没有发送任何数据。

首先，应该有一些东西可以处理 GET：

var express = require('express');
var app = express();

app.get('/', (req, res)=>{
    res.sendFile('index.html');
    console.log('Someone saw your website!');
})

app.listen(80);

其次，提交后返回一些东西：

app.post('/data/name/:name/ssn/:ssn', function(req, res) {
    console.log('req.query: ', req.query); // {}
    console.log('req.query.name: ',req.query.name); // undefined
    console.log('req.query.ssn: ',req.query.ssn); // undefined
    console.log('req.params: ',req.params); // { name: ':name', ssn: ':ssn' }
    console.log('req.params.name: ',req.params.name); // :name
    console.log('req.params.ssn: ',req.params.ssn); // :ssn
    res.end('Thankyou, \n Your Name:'+req.params.name+'\n Your Ssn:'+req.params.ssn);
});