Sending data from javascript/html page to Express NodeJS server

Question

I'm working on a cordova application, using html5 and javascript.

The architecture is the following one : the phone application requests something to the server, which asks a firebird database. The database answers to the server which gives the asked data to the phone application (in html5 / javascript).

I've been able to send the data from the server to the phone with JSON, and I thought it would be the same to send some data from the phone app to the server. However, I have no idea how to send data to such a server from the phone. I've tried to simplify the problem as much as possible.

So considering the following javascript code :

var send = { "name":"John", "age":30, "car":null };
var sendString = JSON.stringify(send);
alert(sendString);
xhttp.send(sendString);

(the alert does send me : {"name":"John","age":30,"car":null} )

How do I retrieve it in my Node JS server ? For the moment, my code is the following one :

app.post('/createEmp', function(req, res){  
    //res.send(req.body.name);
    //console.log('test :' + req.app.post('name'));
    //console.log(req);
    console.log('createEmp');
    if(typeof(req) == 'undefined') {console.log('Y a rien'); } 
    else {
            console.log('La req n est pas vide, son type est : ' + typeof req);
    }    
    console.log(typeof req.query.name);
});

I let the comments so that you know what I already tried (there are more)... Each time, the type of req is either defined or it is an object, but since it is circular I can't parse it so I'm not sure it is the data sent from the phone application.

So could you please give me a piece of advice, an explication about how I could send the data from the phone to the server ? (I guess I could try to show the data in a url that would be parsed by the server but I prefer not having to do so to protect the data...).

Any help would be appreciated ! Thank you very much !

(PS : I've already been looking for some answers everywhere but nothing worked yet)

Solution 1

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.

Solution 2

First of all on the client side do this..

var send = { "name":"John", "age":30, "car":null };
var sendString = JSON.stringify(send);
alert(sendString);
xhttp.send(send);

Then on the server side you need to add a middleware that will populate the body parameter in your request object.

var express=require("express");
var bodyParser=require("body-parser");

var app=express();

// Process application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: true}))

// Process application/json
app.use(bodyParser.json());

app.post('/createEmp', function(req, res){  
//now req.body will be populated with the object you sent
console.log(req.body.name); //prints john
});

Comments

[Myriam Sarah]

Thank you. I tried it but when I ask : console.log(req.body.name); , it still returns 'undefined' :/.

[Myriam Sarah]

And when I asked to show JSON.stringify(req.body), it returns an empty body : {}.

[pkolawa]

I have added some info about content-type header and POST method from MDN above. Try this one.

[Myriam Sarah]

Thank you !! We solved this with a friend after a while and it was exactly this " setRequestHeader("Content-Type", "application/json") " that was necessary ! Thank you ! :)

[Geza Kerecsenyi]

I assume you mean: var send = { "name":"John"... xhttp.send(sendString); as opposed to xhttp.send(send)?