9

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
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
user655577
  • 231
  • 1
  • 4
  • 17

1 Answers1

19

The HTML5 FormData API sends a multipart/form-data request. It's initially designed to be able to upload files by ajax, with the new version 2 XMLHttpRequest. Uploading files wasn't possible with the previous version.

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 annotate your servlet class with @MultipartConfig so that you can get them by request.getParameter().

@WebServlet
@MultipartConfig
public class YourServlet extends HttpServlet {}

Or, when you're still not on Servlet 3.0 yet, use Apache Commons FileUpload. For a more detailed answer on both approaches, see this: How to upload files to server using JSP/Servlet?

If you don't need to upload files at all, 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.

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 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? – user655577 Apr 24 '12 at 17:42
  • 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](http://jquery.com). This saves you from writing XMLHttpRequest boilerplate yourself (and worrying about cross browser problems). See also the doc and examples: http://api.jquery.com/jQuery.post/ – BalusC Apr 24 '12 at 17:47
  • 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? – user655577 Apr 24 '12 at 17:57
  • Thanks, great explanation :) – Adi Prasetyo Apr 03 '16 at 07:47