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.

Andy
– Andy

2015-03-27 11:08:04 +00:00
Commented Mar 27, 2015 at 11:08 — Andy
– Andy, Commented Mar 27, 2015 at 11:08

jcubic · Accepted Answer · 2021-04-19 06:50:33Z

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, 2021 at 6:50

answered Mar 27, 2015 at 11:06

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

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

1 Comment

Mathlight Over a year ago

Wow, can't believe it was just that simple... Thank you for the easy solution, will accept your answer when possible.

Quentin · Accepted Answer · 2015-03-27 11:07:27Z

2

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.

answered Mar 27, 2015 at 11:07

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

eel ghEEz Over a year ago

MDN shows Javascript initialization objects in xhr.send() as if they are OK to be sent as form parameters. developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send I just removed these "examples" from there. Some GitHub users added them without testing.

Collectives™ on Stack Overflow

XMLHttpRequest send JS Object

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related