XMLHttpRequest 发送 JS 对象

Posted 2023-02-27

【中文标题】XMLHttpRequest 发送 JS 对象

【英文标题】：XMLHttpRequest send JS Object

【发布时间】：2015-05-31 16:37:26

【问题描述】：

我正在尝试使用 (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 函数发送带有帖子的对象？

【问题讨论】：

jQuery can do progress bars.

【参考方案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。

【讨论】：

哇，简直不敢相信就这么简单...感谢您提供简单的解决方案，如果可能，将接受您的回答。

【参考方案2】：

你不能。 “对象”是一种存在于内存中的数据结构，并且只对正在处理它的程序有意义。

您需要序列化数据（例如，使用application/x-www-form-urlencoded 格式、JSON、XML 或许多其他选择）然后发送。

如果您尝试发送整个 DOM 元素（并且不清楚您要发送的实际数据是什么），那么序列化它们将涉及将它们转换为 html 或（这通常是更好的选择）它们代表的数据结构。

【讨论】：

MDN 在 xhr.send() 中显示 javascript 初始化对象，就好像它们可以作为表单参数发送一样。 developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send 我刚刚从那里删除了这些“示例”。一些 GitHub 用户未经测试就添加了它们。