How to pass data from client side Javascript to node.js using XMLHttpRequest?

Question

I have HTML inputs in my index.html file.

<input type="text" id="handle" >
<input type="text" id="message" >
<button id="send">send</button>

When I fill up data and click send, I want to send them to my node script where I can do something with passed data.

My index.html's script:

$("#send").on("click", function() {
    var message = $("#message").val();
    var handle = $("#handle").val();


    var xhr = new XMLHttpRequest();
    var data = {
        param1: handle,
        param2: message
    };
    xhr.open('POST', '/data');
    xhr.onload = function(data) {
        console.log('loaded', this.responseText);
    };
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(data));

});

And how I have tried to recieve data in my serverside test.js file.

app.post('/data', function(req, res){

    var obj = {};
    console.log('body: ' + req.body);
    res.send(req.body);

});

In this case, the output shows: body: undefined

How can I send the data from my client side pages to server side so that I can use them to perform my other operations?

since you ware using jquery why not use $.ajax( ... also what is is your endpoint doing post .. "/data" ? usully node.js sits on a diffrent port to your normal site if not using it native also see: stackoverflow.com/questions/4295782/… — taggartJ
– taggartJ, Commented Jan 9, 2019 at 6:41
@madalinivascu I currently have no errors in front-end console. — user7448948
– user7448948, Commented Jan 9, 2019 at 7:17

Terry Lennox · Accepted Answer · 2019-01-09 07:57:01Z

1

You just need to use a JSON body parser in Express like so:

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

app.use(express.static('./'));
/* Parse JSON data using body parser. */
app.use(bodyParser.json());

app.post('/data', function(req, res){
    console.log('body: ',  req.body);
    res.send(req.body);
});

app.listen(port);

Just do an npm install for this module if not already present:

npm install body-parser

answered Jan 9, 2019 at 7:57

Terry Lennox

30.9k5 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass data from client side Javascript to node.js using XMLHttpRequest?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related