如何创建XMLHttpRequest FormData表单对象

Question

I have a form that has files in it so i am using XMLHttpRequest to handle the sending of the data.

What i am trying to do is to be able to send objects that will be parsed by jackson on the server side. just like you do with json.

For example:

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

}

So i want to create "object". from what i know i can only do "number" and "string" with

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

May be there is a way to format it?

when i just append some JSON formated object i get this as a result:

  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"}}

which is clearly not going to be parsed into anything on the server side.

Answer 1

To send an Javascript object via form data with XMLHttpRequest, you'll need to JSON stringify it:

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

More here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify