XMLHttpRequest发送JS对象

Question

我试图使用（POST）XMLHttpRequest发送一个JS对象，但是在PHP中我没有得到任何POST数据。

这段代码之前使用Ajax请求时有效，但是我现在想从服务器获取进度条的反馈（现在正常工作）。这就是为什么我改用XMLHttpRequest的原因。

代码：

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

所以我的问题很简单……如何通过XmlHttpRequest函数使用post发送一个对象？

- Mathlight

---

jQuery可以制作进度条。 - Andy

Answer 1

使用JSON：

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

编辑:

你也可以使用更新的 fetch API，请查看Fetch: POST JSON data。

- jcubic

---

哇，真没想到问题这么简单...感谢您提供的简单解决方案，我会尽快采纳您的答案。 - Mathlight

Answer 2

您无法直接发送"对象"(即仅在程序处理中才有意义的内存数据结构)。您需要将数据序列化(例如使用"application/x-www-form-urlencoded"格式、JSON、XML或其他选项)，然后再发送。

如果您试图发送整个DOM元素(而实际要发送的数据不明确)，则应将它们序列化为HTML或表示它们的数据结构(通常是更好的选择)。请注意保留HTML标签。

- Quentin

---

MDN 在 xhr.send() 中展示了 JavaScript 初始化对象，好像它们可以作为表单参数发送。https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send 我刚刚从中删除了这些“示例”。一些 GitHub 用户在没有测试的情况下添加了它们。 - eel ghEEz