HTML5 FormData 在 Java Servlet request.getParameter() 中返回 null

Posted

技术标签:

【中文标题】HTML5 FormData 在 Java Servlet request.getParameter() 中返回 null【英文标题】:HTML5 FormData returns null in Java Servlet request.getParameter() 【发布时间】:2012-05-04 18:19:16 【问题描述】:

我的视图是 html 5。我正在使用 FormData 将 AJAX 2 POST 发送到 Servlet。在 servlet 内部,我试图读取请求参数。我看不到任何参数。但是,Google Chrome 开发控制台会显示请求负载。我怎样才能在 Servlet 代码中得到相同的结果?任何帮助将不胜感激。这是代码。

JS代码

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 代码(两个参数都返回null

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

谷歌浏览器控制台

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

【问题讨论】:

提供更多Servlet的doPost()方法的代码。 【参考方案1】:

HTML5 FormData API 发送 multipart/form-data 请求。它最初设计为能够通过ajax上传文件,新版本2XMLHttpRequest。以前的版本无法上传文件。

request.getParameter() 默认只识别application/x-www-form-urlencoded 请求。但是您发送的是multipart/form-data 请求。您需要使用 @MultipartConfig 注释您的 servlet 类,以便您可以通过 request.getParameter() 获取它们。

@WebServlet
@MultipartConfig
public class YourServlet extends HttpServlet 

或者,如果您还没有使用 Servlet 3.0,请使用 Apache Commons FileUpload。有关这两种方法的更详细答案,请参阅:How to upload files to server using JSP/Servlet?

如果您根本不需要上传文件,请改用“标准”XMLHttpRequest 方法。

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);

这样你的servlet就不再需要@MultipartConfig了。

另见:

How to use Servlets and Ajax? sending a file as multipart through xmlHttpRequest

【讨论】:

嗨 Balus,感谢您的帖子。你的回答准确而中肯。 FormData 对于我的简单应用程序来说太过分了。我认为我最好使用简单的 XMLHttpRequest。但是,我有一个简单的问题,如何使用 xhr 发送请求参数?我知道有一个名为 send() 的方法接受输入。我该如何使用它? 构造一个 URL 编码的查询字符串。例如。 "name1=value1&name2=value2&name3=value3" 并将其传递给 send()。但是,使用jQuery 要容易得多。这使您不必自己编写 XMLHttpRequest 样板文件(并担心跨浏览器问题)。另请参阅文档和示例:api.jquery.com/jQuery.post 是的,我明白了。它正在工作。我喜欢 jQuery 框架,因为它可以处理很多样板,正如你所提到的。但是,使用 jQuery 我如何检查这样的事情: if (typeof xhr.withCredentials === undefined) // do something else //do something else 因为我没有 xhr 句柄? 不客气。由于您是新来的,请不要忘记在回答(最)有助于解决具体问题时将其标记为已接受。另请参阅How does accepting an answer work? 对questions you asked previously 执行相同操作,只要适用。至于您的新问题,您可以使用$.ajax()beforeSend: function(xhr) ); 回调,另请参阅api.jquery.com/jQuery.ajax 如果您遇到问题,请提出新问题。 谢谢,很好的解释:)

以上是关于HTML5 FormData 在 Java Servlet request.getParameter() 中返回 null的主要内容,如果未能解决你的问题,请参考以下文章

HTML5可预览多图片ajax上传(使用formData传递数据)

HTML5可预览多图片ajax上传(使用formData传递数据)

使用PHP和HTML5 FormData实现无刷新文件上传教程

如何检查浏览器是不是支持 HTML5 文件上传(FormData 对象)?

AJAX-----13HTML5中新增的API---FormData

jersey1.x集合html5使用FormData上传多文件实例