Node.Js - How to Send Data from HTML to Express

Passing a variable from node.js to html

I figured it out I was able to pass a variable like this

<script>var name = "<%= name %>";</script>
console.log(name);

Node.js - How to send data from html to express

Using http.createServer is very low-level and really not useful for creating web applications as-is.

A good framework to use on top of it is Express, and I would seriously suggest using it. You can install it using npm install express.

When you have, you can create a basic application to handle your form:

var express = require('express');
var bodyParser = require('body-parser');
var app     = express();

//Note that in version 4 of express, express.bodyParser() was
//deprecated in favor of a separate 'body-parser' module.
app.use(bodyParser.urlencoded({ extended: true })); 

//app.use(express.bodyParser());

app.post('/myaction', function(req, res) {
  res.send('You sent the name "' + req.body.name + '".');
});

app.listen(8080, function() {
  console.log('Server running at http://127.0.0.1:8080/');
});

You can make your form point to it using:

<form action="http://127.0.0.1:8080/myaction" method="post">

The reason you can't run Node on port 80 is because there's already a process running on that port (which is serving your index.html). You could use Express to also serve static content, like index.html, using the express.static middleware.

How can I send data (string) from my html to my server (node or express) and execute certain function with it?

You should be able to send data from your client to the server via the request body regardless of the request method whether GET/POST/PUT.

fetch call would look like this

// just a simple  get request
 fetch('/example-endpoint', {
   method: 'POST',
   body: {
     data: 'String to be sent'
   }
 });

And on your node express server

 app.post('/example-endpoint', (req, res) => {
  const  data = req.body.data;

  // do stuff with your data here.
 })

GET request method is used for getting data, while POST and PUT are used for creating and updating data, so use them as you need them.

How to send data from html to node.js

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.

npm install body-parser  // this allows us to access req.body.whatever

After 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

<form action="http://localhost:8080/example" method="POST">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
 <button type="submit">Send to backend</button>
</form>

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

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!

Sending data from javascript/html page to Express NodeJS server

req is an object full of stuff that comes with every request. You need to get body of your request. This might help you: How to retrieve POST query parameters?

But because there's not much client-side JavaScript i ust ask: Have you specified you want to POST this?

Try do it like here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send
...and when you use xhr.setRequestHeader("Content-Type", "application/json") you probably don't need to stringify this.

How to send data from Node.js server to HTML document?

You need to use ejs or jade template system to fill data into html file and then send it to user in response.
For your reference, here's a link

---

Related Topics