How to send data from front-end to back-end with Node JS?

1)-Step 1: Create the HTML file

First, let's create an HTML file named index.html.

Inside this file we'll add 3 input areas: One for the name, one for the email and one for the city and we'll give each of the inputs a class.

Once created we will add some style to the 3 inputs to make them aligned vertically.

Finally we'll add a button to send data at the click of the button.

So the index HTML file will look like this:

And on the browser it will look like this:

2)-Step 2: Specify where to send the data

Now that we have created the HTML file with the inputs in it, it is time to tell the browser where to send the data once the user fills in the inputs.

In other words, let's say I'm the user and I will add my name, my email and my city. So once I add these elements and click on the "send data" button, where will the browser send the data?

To do that we'll add what we call routing. The routing is simply the route the browser will send the data to.

And we can choose any route we want. For example here, I will tell the browser to send data to the /api URL. We can tell the browser to send data to any URL we want, /soccer for example or /basketball or /nature.... Choose any name you want it does not matter.

To do that first let's select our input elements one by one and our button in JavaScript. So we'll add a script tag with the following code:

Then, let's add the routing or the URL we talked about and which is /api. So how to add it?

Simply by adding the fetch() syntax.

So the code will be:

Let's take a closer look at the code.

the first line which is button.addEventlistener("click",()=>{}) tells the browser that at the click of the button, I want you to execute this instruction.

"button" is the element we selected before, "addEventListener" is here to add the event on which the button should behave once triggered, "click" is the type of event we want the button to listen to.

After that we created a variable which is obj because this variable will contain an object. This object is made of:

The name of the user

The email of the user

The city of the user

To access the name or the email or the city of the user we have to access the value of the input element. Hence the syntax myName.value. "myName" is the input we selected and "value" is the value of the input.

So whenever we click the button, we want to create a variable that will contain the value of the inputs.

And then comes the fetch() syntax.

The fetch() method takes 2 arguments: the 1st argument is the URL where to send the data, and we said that the URL is /api. And the second argument is object made of:

The method to be used to send the data, in this case we'll use the "POST" method.

The headers that determine the type of content that will be sent to the backend. So here we have an HTML content, but this HTML is transformed into JSON as the fetch API understands JSON and XML format only.

The body, which in other words mean the data. When sending data to the server, the data has to be string. JSON.stringify() syntax converts the object to be sent to the backend into a string.

So the code in the HTML file becomes:

3)- Step 3: Create the .js file

To read more and access the entire tutorial visit my blog: Fetch API to send data