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 :

• Sanitizing POST data in AJAX request
• Send javascript object with AJAX
• How to send javascript object with POST XMLHttpRequest
• Send POST data using XMLHttpRequest.

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.

Answer 1

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);