How To Send Data From Html To Node.js
Solution 1:
I would highly suggest using a framework like Express for a more pleasant Node.js interactions. So the first thing you would have to do is install it:
npm install express
And for my example, I'll install an additional middleware, called body-parser.
npminstallbody-parser// this allows us to access req.body.whateverAfter that make a simple server to handle your POST requests, like this:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.post('/example', (req, res) => {
res.send(`Full name is:${req.body.fname}${req.body.lname}.`);
});
const port = 8080;
app.listen(port, () => {
console.log(`Server running on port${port}`);
});
And here is our HTML form:
So we're sending our data to our localhost [http:// 127.0.0.1], port 8080 and a route of /example --> All that was configurated in our little Express server
<formaction="http://localhost:8080/example"method="POST">
First name: <inputtype="text"name="fname"><br>
Last name: <inputtype="text"name="lname"><br><buttontype="submit">Send to backend</button></form>Solution 2:
You've got a couple of different ways to solve your problem here.
Here's the simplest:
You can use the HTML form directly like you've shown in your example. But you need to understand what it's doing under the hood. So I'll give you a quick explanation.
Here's the bare bones HTML file that you need to write:
<!DOCTYPE html><html><body><formaction="/your-node-server-route-name"method="POST"><inputname="give-me-a-name"type="text" /><buttontype="submit">Send This Bad Boy To The Server</button></form></body></html>So here's what's going on.
In the form tag the action defines where you want to send the data you collect from your user. This is the URL of the route you set up for handling this data on your node server (NOTE: this could be any server, not just node). So if you have a server running at http://localhost:3000 and your route for handling this data is /handle-form-data, then you would write your action as action="http://localhost:3000/handle-form-data" just like that. If your node server also serves this HTML page, then you can use a relative path to point to your route like this: action="/handle-form-data".
The method defined what HTTP method you want to use when submitting your form. For sending data you want to use the POST method. So we write method="POST" to let the node server know we are making a post request. If you are using Express as your web server framework, then you need to configure your route to handle post requests like so:
app.post("/handle-form-data", (req, res) => {
// Do Something in Node here
})
The input tag nested inside the form is used to collect user input. You have to assign a name property to your data so that you can recognize this piece of data on the server. You can give it any name you like. So, for instance, if you want to collect a user's birthday, then write name="user-birthday". The type="text" just tells the browser to render a certain type of style.
Finally, the button tag will allow the user to send the form to your server. Give the button a type="submit" to tell the browser that when a user clicks the button, that the form should be sent.
...............................................
And that's it! That's the basics of handling forms.
But be aware that there are a lot of drawbacks to this simple approach that you may want to take care of in the future. For that I recommend looking at the fetch() method used in Javascript, or using a library like Axios. They will make your life a whole lot easier
Post a Comment for "How To Send Data From Html To Node.js"