HTML5 FormData returns null in Java Servlet request.getParameter()

Question

My view is HTML 5. I'm using FormData to make a AJAX 2 POST to a Servlet. Inside the servlet i'm trying to read request parameters. I can't see any parameters. However, Google Chrome Dev console shows the request payload. How can I get the same in Servlet code? Any help will be appreciated. Here's the code.

JS code

var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('firstName', 'ABC');
formData.append('lastName', 'XYZ');

xhr.open("POST", targetLocation, true);
xhr.send(formData);

Servlet code (both parameters return null)

out.println("Hello! "+ request.getParameter("firstName")+ " "+ request.getParameter("lastName")+ ", thanks for sending your feedback." );

Google Chrome Console

Content-Disposition: form-data; name="firstName"
XYZ
Content-Disposition: form-data; name="lastName"
ABC

Provide some more code of doPost() method of Servlet.

Hardik Mishra
– Hardik Mishra

2012-04-24 06:06:45 +00:00
Commented Apr 24, 2012 at 6:06 — Hardik Mishra
– Hardik Mishra, Commented Apr 24, 2012 at 6:06

BalusC · Accepted Answer · 2024-05-08 11:04:06Z

19

The HTML5 FormData API sends a multipart/form-data request. It was initially designed to be able to upload files by Ajax, with XMLHttpRequest level 2. Uploading files wasn't possible with the first level of XMLHttpRequest.

The request.getParameter() by default recognizes application/x-www-form-urlencoded requests only. But you're sending a multipart/form-data request. You need to explicitly annotate your servlet class with @MultipartConfig so that you can get them by request.getParameter().

@WebServlet
@MultipartConfig
public class YourServlet extends HttpServlet {}

Alternatively, if you actually don't need to upload files at all, but merely need to send plain strings, then use the "standard" XMLHttpRequest approach instead.

var xhr = new XMLHttpRequest();
var data = "firstName=" + encodeURIComponent(firstName)
        + "&lastName=" + encodeURIComponent(lastName);
xhr.open("POST", targetLocation, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);

This way you don't need @MultipartConfig on your servlet anymore.

3 Comments

user655577 Over a year ago

HI Balus, Thanks for the post. Your answer was accurate and to the point. FormData is an overkill for my simple app. I think I'm better off with the simple XMLHttpRequest. But, I've a simple question, how do I send request parameters with xhr? I know there's a method called send() which takes input. How do I use it?

BalusC Over a year ago

Construct an URL encoded query string. E.g. "name1=value1&name2=value2&name3=value3" and pass it to send(). However, much easier is to use jQuery. This saves you from writing XMLHttpRequest boilerplate yourself (and worrying about cross browser problems). See also the doc and examples: api.jquery.com/jQuery.post

user655577 Over a year ago

Yes I got it. It's working . I like jQuery Framework because it can handle lot of boilerplate, as you mentioned. But, using jQuery how do I check something like this: if (typeof xhr.withCredentials === undefined) { // do something } else { //do something else } Since I don't have a xhr handle?

Collectives™ on Stack Overflow

HTML5 FormData returns null in Java Servlet request.getParameter()

1 Answer 1

See also:

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

See also:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related