XMLHttpRequest send JS Object

Question

I'm trying to send an JS Object with an (POST) XMLHttpRequest, but I get no POST data in PHP.

This code worked before with an Ajax request, but i'm trying to get feedback from the server for an progressbar ( whitch is working fine now). That's why i've chagend to XMLHttpRequest.

The code:

var dataRows = {
    'bewaarnaam': bewaarNaam,
    rows: {}
};

$(".rows").each(function (i, obj) {
    var row = $(obj);
    var rowName = $(row).attr('name');
    var chests = {};

    $(".cv_chest", row).each(function (i2, obj2) {
        chests[$(obj2).attr('id')] = {
            'counter': $(obj2).attr('chest_counter'),
                'height': $(obj2).attr('chest_height'),
                'db_id': $(obj2).attr('db_id')
        };
    });

    var top = $(row).css('top').replace("px", "");
    var left = $(row).css('left').replace("px", "");

    var rowData = {
        'name': $(row).attr('name'),
            'x': parseInt(left),
            'y': (parseInt(top - 100)),
            'rotation': rotation[$(row).attr('dir')],
            'db_id': $(row).attr("db_id"),
            'chests': chests
    };

    dataRows.rows[$(row).attr('id')] = rowData;
});

...

var xhr = new XMLHttpRequest();
xhr.open("POST", "{{ url('bewaarplaatsen/xhrTest/') }}", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(dataRows);

So my question is rather simple... How can i send an object with an post through the XmlHttpRequest function?

[jQuery can do progress bars](http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/). — Andy, Mar 27 '15 at 11:08

jcubic · Accepted Answer · 2021-04-19T06:50:33.423

26

Use JSON:

var xhr = new XMLHttpRequest();
xhr.open("POST", "{{ url('bewaarplaatsen/xhrTest/') }}", true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(dataRows));

EDIT:

You can also use newer fetch API, see Fetch: POST JSON data.

edited Apr 19 '21 at 06:50

answered Mar 27 '15 at 11:06

jcubic

61,973
54
229
402

Wow, can't believe it was just that simple... Thank you for the easy solution, will accept your answer when possible. – Mathlight Mar 27 '15 at 11:11

score 2 · Answer 2 · answered Mar 27 '15 at 11:07

You can't. "An object" is a data structure that exists in memory and only makes sense to the program it is dealing with it.

You need to serialise the data (e.g. using the application/x-www-form-urlencoded format, or JSON, or XML, or a host of other choices) and send that instead.

If you are trying to send entire DOM elements (and it isn't clear what the data you are trying to send actually is) then serialising them would involve converting them to HTML or (and this would usually be the better option) a data structure that they represent.

MDN shows Javascript initialization objects in xhr.send() as if they are OK to be sent as form parameters. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send I just removed these "examples" from there. Some GitHub users added them without testing. — eel ghEEz, Jun 08 '18 at 20:39

XMLHttpRequest send JS Object

2 Answers2