How to post a JavaScript object where each object item becomes a $_POST row with xmlhttprequest?

Question

This is not a duplicate of Send POST data using XMLHttpRequest.

I would like to post a JavaScript object in JS. I already read the following questions :

None answer to my question since I would like each item of my JS object becomes a $_POST row. Here is an example:

myObj = { key1:'value1', 'key2':'value2' }

r = new XMLHttpRequest();
r.onreadystatechange = callBack;
r.open('POST', url, 'async');
r.send(myObj);

Server side code:

var_dump($_POST);

On server side, I would like to get from PHP:

$_POST['key1'] set to 'value1'
$_POST['key2'] set to 'value2'

Instead, $_POST is empty.

Note that the previous code works when sending string as:

r.send("key=value");

What's strange is that the link above says it should work but it does not however although I'm using a modern browser.

Please don't SHOUT, it's considered rude. Also "does not work" is not a very good problem description, please take some time to refresh how to ask good questions, as well as this question checklist. And please don't forget how to create a minimal reproducible example to show us. — Some programmer dude
– Some programmer dude, Commented Jan 23, 2020 at 8:55
If you think your previous question was closed incorrectly, you should edit it to clarify and then ask for it to be reopened. Don't post an identical question. — Barmar
– Barmar, Commented Jan 23, 2020 at 9:10
@miken, yes and I clearly do not understand why this question has been closed. "This question is of topic", Are you kidding me ? Could you explain why the question is off topic ? — Fifi
– Fifi, Commented Jan 23, 2020 at 19:33
Why the question is closed? Everything is clear, I would like to post an alternative answer with FormData. — Bot élecul
– Bot élecul, Commented Jan 24, 2020 at 7:52

Barmar · Accepted Answer · 2020-01-23 09:25:36Z

2

The answer you linked to that says you can send the object in r.send() is wrong. The documentation says that the argument to r.send() must be:

A Document, in which case it is serialized before being sent.

A BodyInit, which as per the Fetch spec can be a Blob, BufferSource, FormData, URLSearchParams, ReadableStream, or USVString object.

A plain object is not any of these.

You should convert the object to one of those types, and URL-encoded strings are generally used for ordinary data (FormData is generally only used when you need to upload files).

var params = Object.entries(myObj).map((key, val) => encodeURIComponent(key) + '=' + encodeURIComponent(val))
    .join('&');
r.send(params);

edited Jan 23, 2020 at 9:25

answered Jan 23, 2020 at 9:20

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

2 Comments

Cid Over a year ago

Why not using a FormData ? (from your answer, "you should ..." could be "you can ...")

Barmar Over a year ago

I've clarified that this is the usual type for ordinary strings.

Collectives™ on Stack Overflow

How to post a JavaScript object where each object item becomes a $_POST row with xmlhttprequest?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related