Search code examples
javascripthtmlnode.jsexpressfetch

How to receive POST data from a form/button in HTML in node.js

I'm working on a little passion project, and until now most of my js work has been client-side. I'm starting to delve into some server-side work now, but I'm a little lost at the moment.

Basically, I have a two-fold question.

<form action="/receive" method="post">
  <button class="btn btn-primary results-share-results" data-bs-dismiss="modal">
</form>

  1. Very generally, how would I take a form like this one above and receive its POST request in a node.js program? I think my main hangup is like "where" this POST request is going. What am I pointing it to? And what in the node program is receiving it?

  2. More specifically to my project, I'd like that button to trigger a POST that sends data I have stored in an object to a node script. This script would receive this data and then write it either to a JSON file or to a database (I'm not quite at the database level yet, so a JSON file will do for now).

Thank you in advance!

Honestly, I've mostly fumbled through some YouTube videos. I can understand how a POST/GET request works to an API, but I'm struggling to understand how the calls work to a local file or to a database.

Solution

  • This is not a simple question to answer, but hopefully I can point you in the right direction. The first thing to know is that NodeJS only has a minimal API. Writing a full web API in plain old Node is not an exercise I would recommend, especially if you are new to backend development.

    In order to write a functional API in Node.js, I recommend you use a framework like ExpressJS. This framework is simple enough to use and will save you a lot of work you would have to do manually if using Node.js' native API.

    A simple example of express:

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

app.get('/receive', function(req, res) { 
   //handle your request here.
} );
app.listen(3000);

    Now, when your frontend submits the form above using an HTTP GET verb, the node backend will handle it by calling the function passed as the second argument to app.get(). The req parameter will have the sent data and the res parameter has functions you can use to send a JSON reply back to the frontend.

    Note than I am using a GET verb instead of a POST. Receiving a post actually requires the use of the body-parser npm module as a middleware. Middleware are functions that act on the request before calling your handler function. As this answer is not meant to be a tutorial, I will leave the work of researching how to use body-parser to the OP. There are plenty of examples out there.

    Remember that your handler function must call res.json() or one of the other methods in the res object to reply to the client, otherwise, the browser will wait "forever" (until the request times out).

    Bonus: use node's writeFileSync() to write your JSON file to disk. For a production app, though, use the async version of this function.

    Hopefully this will at least point you in the right direction. Welcome to the backend side of development!