Send [object FormData] instead the data of FormData

Question

My ajax POST not sending the data of the FormData like this :

----------------------------073830197153252215545490
Content-Disposition: form-data; name="docDate"



24/11/2022    
----------------------------073830197153252215545490
Content-Disposition: form-data; name="docExpDate"



30/11/2022
----------------------------073830197153252215545490
Content-Disposition: form-data; name="docType"

instead send like this :

[object FormData]

here is the full curl of my POST request :

POST http://127.0.0.1:8088/list/addDocs_csrf=53d02b64-61ab-4456-86f1-b1b76e46536c HTTP/1.1
Host: 127.0.0.1:8088
Connection: keep-alive
Content-Length: 60
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
Accept: text/html, */*; q=0.01
Content-Type: text/plain;charset=UTF-8
X-Requested-With: XMLHttpRequest
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
sec-ch-ua-platform: "Windows"
Origin: http://127.0.0.1:8088
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://127.0.0.1:8088/cros/ayda/list/add-3DDF5EE0C65B09D6
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: JSESSIONID=AM3N5-IYpEEXdZJToXFUWhvXAp9mlN-LDK_ctDrC.p090wfa072093a


[object FormData]&_csrf=53d02b64-61ab-4456-86f1-b1b76e46536c

I want to push FormData into my Controller that use Spring MVC in Jboss Server

Answer 1

Maybe this will help.

The below JavaScript does what this HTML form would do:

<form enctype="multipart/form-data" method="post" >
<input type="text" name="name1" value="value1" >
<input type="text" name="name2" value="value2" >
<input type="text" name="name3" value="value3" >
</form>

The JavaScript code.

<script>
async function request(){
const formData = new FormData();
formData.append('name1', 'value1');
formData.append('name2', 'value2');
formData.append('name3', 'value3');
  var response =  await fetch('example.com', {
    method: 'POST',
    body: formData
  })
}
window.onload = request;
</script>

The above JS creates a header like this

POST example.com HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Content-Type: multipart/form-data; boundary=---------------------------10177636164258811262893021257
Content-Length: 410
Origin: http://example.com
DNT: 1
Connection: keep-alive

With this body:

-----------------------------10177636164258811262893021257
Content-Disposition: form-data; name="name1"

value1
-----------------------------10177636164258811262893021257
Content-Disposition: form-data; name="name2"

value2
-----------------------------10177636164258811262893021257
Content-Disposition: form-data; name="name3"

value3
-----------------------------10177636164258811262893021257--