javascript - 如何创建 XMLHttpRequest FormData 表单对象

Question

我有一个包含文件的表单，因此我使用 XMLHttpRequest 来处理数据的发送。

我想做的是能够发送将由 jackson 在服务器端解析的对象。就像处理 json 一样。

例如:

{
"number": 123,
"string": "Hello World",
"object": {
    "a": "b"
}

}

所以我想创建“对象”。据我所知，我只能用

做“数字”和“字符串”

 formData.append("string", "Hello World");

有没有办法格式化它？

当我只是附加一些 JSON 格式的对象时，我得到以下结果:

    var oData = new FormData(document.forms.namedItem("upload-form"));
     element= {};
     element.id = 2;
     element.type = "dfsdf";
     element.url = "sdfsdff";
     element.version = "asdasd";
     arrayOfelement[0] = framework;
     oData.append("file", this.myfile.getFile());
     oData.append("frameworks",JSON.stringify(arrayOfelement))
     var xhr = new XMLHttpRequest();
     xhr.open('POST', 'design', true);   
     xhr.onload = function(e) { 
        console.log("upload finished");
      };
     console.debug("sending form data", oData);
     xhr.send(oData);




------WebKitFormBoundaryVWNBucDMZSIlUcXY

Content-Disposition: form-data; name="arrayOfElements" {"0":{"id":2,"type":"dfsdf","url":"sdfsdff","version":"asdasd"}}

这显然不会在服务器端被解析为任何内容。

Answer 1

要使用 XMLHttpRequest 通过表单数据发送 Javascript 对象，您需要对其进行 JSON 字符串化:

var obj = {
    "number": 123,
    "string": "Hello World",
    "object": {
        "a": "b"
    }
}
formData.append(JSON.stringify(obj));

更多信息请参见:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify