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

Question

I am now practicing to make my own local server using with NodeJS and html.

I would like to take some inputs from the front side using web and pass all the variables to NodeJS server side then running a python program to store those variables into my db. I am using POST method since I am storing some values into db.(Please correct me if I am doing wrong way.)

I am trying to take input from a user on front side using input tag in data.html. Below is my part of what I am trying to do. http://localhost:8080/data is my url address and I am taking two values which are called 'name' for the first and 'ssn' for the second.

<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>

Below is my part of server.js. I tried to print out everything that I can think of what I can. I wrote down the results as comments as well. This is the result when I enter 'a' for the name and 'b' for the ssn and submit it.

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
});

When I type 'a' and 'b' into search boxes and hit the submit button, the web browser starting to load but never ends and my VSC shows the result. Can anyone help me what I need to fix?

Answer 1

your code is good. But you are facing this problem because the server is not sending any data after submit.

First, there should be something to handle 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);

Secondly, return something after submit:

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!');
});

Answer 2

looks like you're mixing req.params and req.query , while you actually need req.body

try this:

add this to server.js (you need to install 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);
});

and change HTML form (add name attribute, that's your data):

<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>