How to send data from client's html to node.js server?

Question

I wanted to send JSON data to node.js server.

This is my server.js :

var http = require('http'); var util = require('util') http.createServer(function (req, res) { console.log('Request received: '); util.log(util.inspect(req)) // this line helps you inspect the request so you can see whether the data is in the url (GET) or the req body (POST) util.log('Request recieved: \nmethod: ' + req.method + '\nurl: ' + req.url) // this line logs just the method and url res.writeHead(200, { 'Content-Type': 'text/plain','Access-Control-Allow-Origin': '*' }); req.on('data', function (chunk) { console.log('GOT DATA!'); }); res.end('callback(\'{\"msg\": \"OK\"}\')'); }).listen(8090); console.log('Server running on port 8090');

This is html file :

<!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-1.8.3.min.js "></script> </head> <body> response here: <p id="lblResponse">fill me in</p> <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://127.0.0.1:8090/', // dataType: "jsonp", data: '{ "name":"John", "age":30, "car":null }, type: 'POST', jsonpCallback: 'callback', // this is not relevant to the POST anymore success: function (data) { var ret = jQuery.parseJSON(data); $('#lblResponse').html(ret.msg); console.log('Success: ') }, error: function (xhr, status, error) { console.log('Error: ' + error.message); $('#lblResponse').html('Error connecting to the server.'); }, }); }); </script> </body> </html>

But I am getting this error:

"VM162:1 Uncaught SyntaxError: Unexpected token c in JSON at position 0 at JSON.parse (<anonymous>) at Function.parseJSON (jquery-1.8.3.js:514) at Object.success (file:///home/techm/Desktop/test%20(server-client)/client.html:20:30) at fire (jquery-1.8.3.js:974) at Object.fireWith [as resolveWith] (jquery-1.8.3.js:1084) at done (jquery-1.8.3.js:7803) at XMLHttpRequest.callback (jquery-1.8.3.js:8518)

I don't why I am getting this error because I am little new to node.js server. And if I get the data I want to save it in a local file.

Seems you have some malformed JSON. What does your JSON look like? — Robert Harvey
– Robert Harvey, Commented Jan 4, 2019 at 4:04
@RobertHarvey this is JSON data I wanted to send : '{ "name":"John", "age":30, "car":null } — dishcode
– dishcode, Commented Jan 4, 2019 at 4:07
Seems legit. So why is JSON.parse seeing the character 'c' at the very first position in your JSON string? — Robert Harvey
– Robert Harvey, Commented Jan 4, 2019 at 4:08

Sanjaysinh Zala · Accepted Answer · 2019-01-04 04:16:54Z

Your ajax request should be like this

$.ajax({ url: 'http://127.0.0.1:8090/', data: { "name": "John", "age":30, "car":null }, type: 'POST' ..... })

And in createServer method of server.js update this

if (req.method == 'POST') { console.log("POST"); var body = ''; req.on('data', function (data) { body += data; console.log("Partial body: " + body); }); req.on('end', function () { console.log("Body: " + body); }); res.writeHead(200, {'Content-Type': 'text/html'}); res.end('callback(\'{\"msg\": \"OK\"}\')'); } else { console.log("GET"); res.writeHead(200, {'Content-Type': 'text/html'}); res.end('callback(\'{\"msg\": \"OK\"}\')'); }

@Sanjaysinh It's happening thanks for your quick solution. Now how can I save JSON data to local file?
I added 'let data1 = JSON.stringify(body); fs.writeFileSync('text.json',data1);' But it's copying only " " in json file

Collectives™ on Stack Overflow

How to send data from client's html to node.js server?

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related