Make XmlHttpRequest POST using JSON [duplicate]

Question

How can I make an AJAX POST request sending JSON data using vanilla JS.

I understand the content-type is url form encoded and it doesn't support nested JSONs.

Is there any way I can make such a POST request using nested JSON in plain old JS. I've tried the various serialize methods found here on SO but they all flatten my JSON into one format.

Here's my JSON:

{
   email: "[email protected]",
   response: {
       name: "Tester"
   }
}

Your question does not contain valid JSON. Perhaps you are sending this JavaScript object, which is then converted to JSON through some process? Either way, as has been said by others in the comments to the below answer, there isn't any reason why your JSON object should be flattened. If you are having issues with a specific library or block of code, post that instead. — Ray Nicholus
– Ray Nicholus, Commented Sep 15, 2016 at 20:06

John · Accepted Answer · 2019-03-04 07:44:20Z

345

If you use JSON properly, you can have nested object without any issue :

var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
var theUrl = "/json-handler";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify({ "email": "[email protected]", "response": { "name": "Tester" } }));

edited Mar 4, 2019 at 7:44

John

30.8k18 gold badges94 silver badges134 bronze badges

answered Sep 15, 2016 at 19:52

Gilles Quénot

189k43 gold badges232 silver badges231 bronze badges

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

10 Comments

markroxor Over a year ago

not working for me :(

Arampg Over a year ago

@BillalBegueradj, his target URL is "/json-handler", a relative path to the domain where the call is being made. May be the name is a bit confusing, it happened the same to me... Just change it for "someFolderNameHere"

James Shapiro Over a year ago

Note that this only works for "POST" and "PUT" requests. If you are using a "GET" request, the argument to of xmlhttp.send([argument]) will be ignored. I wound up changing an AWS API Gateway endpoint resource to "PUT" to get around this issue...

user2188550 Over a year ago

charset=UTF-8 is unnecessary because it is the default encoding/charset for the application/json type

Tyguy7 Over a year ago

This doesn't seem to actually send the post body for me...

|

Collectives™ on Stack Overflow

Make XmlHttpRequest POST using JSON [duplicate]

1 Answer 1

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Linked

Related