How do i get json data from HTML to Nodejs server

Question

I created a UI to read, write and update a config file using HTML but I am not able to save new JSON object to my existing config file.

So I need to post JSON object from HTML file to nodejs server

JAVASCRIPT

 var testJson = { name: "mufashid" }
        $.ajax({
            url: 'http://localhost:3000/test/config',
            type: 'POST',
            dataType: 'json',
            data: { o: JSON.stringify(testJson ) }, // bags collection value what your goging to send to server 
            // crossDomain: true,
            success: function (data) {
                alert('Success!')
            },
            error: function (jqXHR, textStatus, err) {
                //show error message
                alert('text status ' + textStatus + ', err ' + err)
            }
        });

nodejs


app.post('/test/config', function (req, res) {
    // console.log(res);
    console.log(req)

})

Need to update the config file with the new value when pressed the save button.

Have you tried `req.data`? You can try using console.log to debug — Shinjo, Aug 06 '19 at 07:42
@Shinjo Yes i have tried ```req.data``` it showing undefined. — Mufshid, Aug 06 '19 at 07:44
@Shinjo ``` IncomingMessage { _readableState: ReadableState { objectMode: false, .......``` Its is a long list — Mufshid, Aug 06 '19 at 07:51
What about your (`res`)? Could help: https://stackoverflow.com/questions/45105992/node-js-send-data-to-backend-with-ajax, https://stackoverflow.com/questions/13478464/how-to-send-data-from-jquery-ajax-request-to-node-js-server. Once you're able to access your json from ajax request you could easily manipulate the data. — Shinjo, Aug 06 '19 at 07:56
@Shinjo Thanks that link helped i just used ```$.post('/email', { address: 'xxx@example.com' });``` to send and to get ```console.log(req.body.address);``` — Mufshid, Aug 06 '19 at 08:07

score -1 · Answer 1 · answered Aug 06 '19 at 08:03

You missed contentType: "application/json" in your javascript code.

var testJson = { name: "mufashid" }
        $.ajax({
            url: 'http://localhost:3000/test/config',
            type: 'POST',
            contentType: "application/json",// you missed this line.
            dataType: 'json',
            data: JSON.stringify({ o: testJson }), // IMportant!!!!!!
            // crossDomain: true,
            success: function (data) {
                alert('Success!')
            },
            error: function (jqXHR, textStatus, err) {
                //show error message
                alert('text status ' + textStatus + ', err ' + err)
            }
        });

score -1 · Answer 2 · answered Aug 06 '19 at 10:11

Please find the below code. Content type was missing

$.ajax({
    url: 'http://localhost:3000/test/config',
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify({
      o: testJson
    }),
    // crossDomain: true,
    success: function (data) {
      alert('Success!')
    },
    error: function (jqXHR, textStatus, err) {
      //show error message
      alert('text status ' + textStatus + ', err ' + err)
    }
  });

Routes

app.post('/test/config', function (req, res) {
  console.log(req.body.o);
})

How do i get json data from HTML to Nodejs server

2 Answers2