（转）表单form的提交和servlet的取值

转发博客原址：<a href="https://segmentfault.com/a/1190000015718785" >https://segmentfault.com/a/1190000015718785</a>

<h1 id="articleHeader0">表单form的提交和servlet的取值</h1> <h2 id="articleHeader1">一、前言</h2> 对于后端开发来说，经常要和前端进行联系的两个面就是：1、表单form提交至servlet。2、ajax提交至servlet进行处理。 显然，有必要对这两个常用的功能进行一次梳理。 <h3 id="articleHeader2">1、一个中文乱码的坑</h3> 在表单传值和后台进行交流的时候，一个最大的坑就是中文的乱码问题了。这个坑的具体分析不过多阐述，最佳实践就是： 使用<code>post</code> 方式进行数据的提交，后台设置字符集过滤器，对<code>request</code>、<code>response</code> 的字符集都设置为<code>utf-8</code> 。 <h3 id="articleHeader3">2、表单form的enctype字段</h3> HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值： <ul> <li> <code>application/x-www-form-urlencoded</code>在发送数据之前，编码所有字符（空格被编码为’+’，特殊字符被编码为ASCII十六进制字符，中文会被编码，英文不会）。此时，数据是以编码后的字符串形式进行传输。 </li> <li> <code>multipart/form-data</code> 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。此时，数据是以二进制流的形式进行传输。 </li> <li> <code>text/plain</code> 空格转换为 “+” 加号，但不对特殊字符编码。</li> </ul> 默认值是<code>enctype=application/x-www-form-urlencoded</code>，所以表单的内容会按URL规则编码，然后根据表单的提交方法： <ul> <li> <code>method="get"</code> ，编码后的表单内容附加在请求连接后</li> <li> <code>method="post"</code> ，编码后的表单内容作为post请求的正文内容</li> </ul> <h2 id="articleHeader4">二、使用<code>action</code> 的表单</h2> 前端的表单，在填写了数据之后将数据发送给后端进行处理。这里，我们所指的表单意为通过<code>action</code> 字段进行提交，通过<code>ajax</code> 模拟提交的情况放在下一大点中讨论。 而这里的表单又分为2种情况： <ol> <li>表单form单纯的只有数据项，只提交文本数据，通常是<code>key-value</code> 的形式，对于复选框亦如此。</li> <li>表单form既有文本数据项，又有文件数据，即包含<code><input type="file" ...></code> 字段。</li> </ol> <h3 id="articleHeader5">1、只提交文本数据的表单</h3> 例如表单： <div class="widget-codetool" style="display: none;"> <div class="widget-codetool--inner"> <input type="text" name="username">  <input type="radio" name="sex" value="male">male <input type="radio" name="sex" value="female">female  <select name="education"> <option value="primary">primary</option> <option value="middle">middle</option> <option value="high">high</option> </select>  <input type="checkbox" name="hobby" value="basket">basket <input type="checkbox" name="hobby" value="tennis">tennis <input type="checkbox" name="hobby" value="football">football <input type="submit" value="提交"> </form>" title="" data-original-title="复制"> </div> </div><pre class="xml hljs"><code class="html"><form action="/webapp/formServlet" method="post"> <input type="text" name="username">  <input type="radio" name="sex" value="male">male <input type="radio" name="sex" value="female">female  <select name="education"> <option value="primary">primary</option> <option value="middle">middle</option> <option value="high">high</option> </select>  <input type="checkbox" name="hobby" value="basket">basket <input type="checkbox" name="hobby" value="tennis">tennis <input type="checkbox" name="hobby" value="football">football <input type="submit" value="提交"> </form></code></pre> 在servlet中获取数据： <div class="widget-codetool" style="display: none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="String username = request.getParameter("username"); String sex = request.getParameter("sex"); String education = request.getParameter("education"); String[] hobby = request.getParameterValues("hobby");" title="" data-original-title="复制"> </div> </div><pre class="java hljs"><code class="java">String username = request.getParameter("username"); String sex = request.getParameter("sex"); String education = request.getParameter("education"); String[] hobby = request.getParameterValues("hobby");</code></pre> <h4>解读</h4> 数据编码： 对于纯文本的表单，其字段<code>enctype=application/x-www-form-urlencoded</code> 是默认值，表示表单的数据进行url编码，如：表单的数据被编码成<code>username=123&password=222</code> 。 传输方式： 数据传输方式<code>method</code> ：如果使用<code>get</code> ，那么该字符串会追加到请求的url地址后面；而如果使用<code>post</code> ，那么打开调试台，查看<code>Form Data</code> 项也可以查看到字符串。 这种表单提交数据的方式最为简单。 <h3 id="articleHeader6">2、提交文本数据和文件数据的表单</h3> 例如表单： <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <input type="text" name="username"> <input type="password" name="password"> <input type="file" name="file"> <input type="submit" value="提交"> </form>" title="" data-original-title="复制"> </div> </div><pre class="xml hljs"><code class="html"><form action="/webapp/formServlet" method="post" enctype="multipart/form-data"> <input type="text" name="username"> <input type="password" name="password"> <input type="file" name="file"> <input type="submit" value="提交"> </form></code></pre> 在servlet中获取数据以及保存文件： 因为传输过来的是二进制流，因此无法使用<code>getParameter()</code> 等现成的方法来获取值。推荐使用<code>apache upload</code> 框架来进行数据的读取操作。当然，servlet也有原生的方法来获取，参考(<a href="https://docs.oracle.com/javaee/7/tutorial/servlets011.htm#BABFGCHB)" rel="nofollow noreferrer" target="_blank">https://docs.oracle.com/javae...</a> 、(<a href="https://docs.oracle.com/javaee/7/tutorial/servlets016.htm#BABDGFJJ)" rel="nofollow noreferrer" target="_blank">https://docs.oracle.com/javae...</a> 。 <h4>解读</h4> 传输方式： 因为是二进制流，所以<code>method</code> 只能使用<code>post</code> 进行提交，无法使用<code>get</code> 。 <h3 id="articleHeader7">3、servlet的处理再谈一谈</h3> 既然我们在servlet中可以获取到表单传过来的值了，那么我们的返回又应该是什么样的呢？对于使用<code>action</code> 提交的表单，我们的servlet必须将请求转发或者使用重定向，以此进行页面的切换（跳转）。如果想携带新的数据，只能在请求转发的<code>request</code> 对象上进行数据的添加。 请求转发： <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="request.setAttribute("msg","登录成功！"); // 携带数据 request.getRequestDispatcher("/success.jsp").forward(request,response);" title="" data-original-title="复制"> </div> </div><pre class="java hljs"><code class="java">request.setAttribute("msg","登录成功！"); // 携带数据 request.getRequestDispatcher("/success.jsp").forward(request,response);</code></pre> 重定向： <div class="widget-codetool" style="display: none;"> <div class="widget-codetool--inner"> </div> </div><pre class="java hljs"><code class="java" style="word-break: break-word; white-space: initial;">response.sendRedirect("/webapp/success.jsp");</code></pre> 解读 很明显，直接使用<code>action</code> 提交是很不好的。因为在提交至servlet时，地址栏的路径会变成指向servlet的路径，而这时候，如果使用请求转发的话，那么地址栏的路径并不会改变，这样就不是很优雅。而如果使用重定向的话，就无法携带数据，对于常见的登录验证（需要错误信息）就无法完成了。另一个缺点就是，无论是请求转发还是重定向，原本填写的表单数据都被清空，这样是极为糟糕的。 表单提交的最常见场景，往往就是用户登录或者是文件上传，这些都需要服务器做出反馈，鉴于上面所说的缺点，我们就不会使用<code>action</code> 的表单，而是使用更为强大ajax技术。 <h2 id="articleHeader8">三、使用ajax技术，模拟表单提交</h2> 前言： 我们先聊一聊ajax技术，ajax是发起一个http请求，当然可以携带数据，这个数据是以字符串的形式来传输的。当然，这个请求被发送至servlet进行处理，servlet返回处理后的信息，这个信息被ajax的回调函数所接受，然后ajax就可以进行相应的操作了。 当使用ajax时，可以没有表单的存在，因为我们不需要<code>action</code> 了，我们只需要得到要传输的数据即可。同时，对于<code>type="submit"</code> 字段也要小心设置，因为我们其实可以不设置该值，或者在js事件中进行表单提交的判断。 区别： ajax的过程和表单提交几乎差不多，不同的是：ajax发出的http请求并不是浏览器发出的请求，因此servlet是没有办法影响页面的跳转的 ，所以要想进行页面的跳转只能是ajax的回调函数中进行处理。并且大多数时候，servlet的处理也会返回<code>json</code> 数据至前台。这里的话，就涉及到<code>json</code> 数据的反序列化和<code>java</code> 对象（或者是<code>Map</code> 、<code>List</code> ）的序列化了。 缓存： ajax发出的请求通常会被浏览器缓存，因此我们可以应该拒绝缓存。通常是在url地址后面追加一个随机字符参数，而使用jquery的ajax可以设置<code>cache:false</code> 这个属性就ok了。 jquery的ajax： 因为原生的ajax技术代码较多，因此我们使用jquery封装好的ajax函数来讲解其用法。在jQuery中，<code>$.ajax()</code> 方法属于最底层的方法，第2层是<code>$.load()</code>，<code>$.get()</code>，和<code>$.post()</code>，第3层是<code>$.getScript()</code>和<code>$.getJSON()</code> 方法。第2、3层都是调用了第1层来实现的。 <h3 id="articleHeader9">1、一个提交后页面自动刷新的坑</h3> 有时候，在点击提交之后，页面会自动刷新，我们无法查看相关的数据，这是一个大坑。正确的解决方法，使用<code><input type="button" value="提交" /></code> 这个按钮来进行事件绑定并提交。当然，这是针对ajax来用的。 <h3 id="articleHeader10">2、仅发送请求至servlet，接收返回数据</h3> 当我们不需要发送数据的时候，其实只需要在一个js的事件中使用ajax就可以了，不需要表单。这种方式实际用的比较少。 一个触发ajax的按钮： <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> ajax_1</button>" title="" data-original-title="复制"> </div> </div><pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><button id="bt_1">ajax_1</button></code></pre> jquery代码：（请求servlet，接收返回数据） <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var bt_1=$("#bt_1"); bt_1.on("click",function () { $.ajax({ url:"/webTest/ajax1", // 请求的servlet type:"post", // 因为没有携带数据，无所谓 async: true, // 异步 cache: false, // 不许缓存 success:function(data){ // 请求成功，200 console.log(data); }, error:function(error){ // 请求失败 console.log(error); } }) })" title="" data-original-title="复制"> </div> </div><pre class="javascript hljs"><code class="javascript">var bt_1=$("#bt_1"); bt_1.on("click",function () { $.ajax({ url:"/webTest/ajax1", // 请求的servlet type:"post", // 因为没有携带数据，无所谓 async: true, // 异步 cache: false, // 不许缓存 success:function(data){ // 请求成功，200 console.log(data); }, error:function(error){ // 请求失败 console.log(error); } }) })</code></pre> servlet处理代码：（返回数据） <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="PrintWriter out = null; try { out = response.getWriter(); // 打开response的输入流 } catch (IOException e) { e.printStackTrace(); } out.print("I give u a feedback"); // 写入信息到response out.close();" title="" data-original-title="复制"> </div> </div><pre class="java hljs"><code class="java">PrintWriter out = null; try { out = response.getWriter(); // 打开response的输入流 } catch (IOException e) { e.printStackTrace(); } out.print("I give u a feedback"); // 写入信息到response out.close();</code></pre> <h3 id="articleHeader11">3、携带文本数据，发送请求至servlet，接收返回数据</h3> 有的时候，我们需要携带一些数据，可以是常见的表单，也可以是一些零散的数据。在这种情况下，我们需要将数据封装成<code>json</code> 数据格式进行传输。 <h4>3.1 第一种封装的<code>json</code> 数据：对象形式</h4> jquery代码： <div class="widget-codetool" style="display: none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var sub=$("#sub"); sub.on("click",function () { $.ajax({ url:"/webTest/ajax2", type:"post", async:true, cache: false, data: { // json数据（注意，不能使用JSON.stringify()方法，否则出错） "username": "liSi", "password": "ps" }, success:function(data){ console.log(data); }, error:function(error){ console.log(error); } }) })" title="" data-original-title="复制"> </div> </div><pre class="javascript hljs"><code class="javascript">var sub=$("#sub"); sub.on("click",function () { $.ajax({ url:"/webTest/ajax2", type:"post", async:true, cache: false, data: { // json数据（注意，不能使用JSON.stringify()方法，否则出错） "username": "liSi", "password": "ps" }, success:function(data){ console.log(data); }, error:function(error){ console.log(error); } }) })</code></pre> servlet处理代码：（接收数据，返回数据） <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="String username = request.getParameter("username"); String password = request,getParameter("password");

PrintWriter out = null; try { out = response.getWriter(); // 打开response的输入流 } catch (IOException e) { e.printStackTrace(); } out.print("I give u a feedback"); // 写入信息到response中 out.close();" title="" data-original-title="复制"> </div> </div><pre class="java hljs"><code class="java">String username = request.getParameter("username"); String password = request,getParameter("password");

PrintWriter out = null; try { out = response.getWriter(); // 打开response的输入流 } catch (IOException e) { e.printStackTrace(); } out.print("I give u a feedback"); // 写入信息到response中 out.close();</code></pre>

<h4>解读</h4> 在这种情况下，封装的json数据因为比较简单，所以数据被编码成字符串发送至servlet，就和之前使用<code>action</code> 的表单提交文本数据的情况一样。 注意，一旦<code>json</code> 数据复杂一点点，如<code>{"username":"liSi","hobby":{"todya":"ttennis"}}</code> ；就无法使用<code>getParameter("hobby")</code> 来获取数据了，这也是下面要将的第二种封装的<code>json</code> 数据。显然，这种封装的<code>json</code> 数据的获取，是一种特殊情况，在大多数不复制的情况是一种很好的方式。 <h4>技巧</h4> 当我们使用了表单的时候，如果我们只是想传输表单的值，那么就没有必要手工取值化成json形式，jquery提供了相应的方法来简化操作。当然，只是针对文本数据而言。 jquery代码1： <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var data_json = $("#form_1").serialize();

data: data_json," title="" data-original-title="复制"> </div> </div><pre class="javascript hljs"><code class="javascript">var data_json = $("#form_1").serialize();

data: data_json,</code></pre>

这里通过序列化函数，会自动把表单的数据转化为字符串形式(url)，也就是和<code>action</code> 表单提交一致的效果。在servlet中可以直接通过<code>getParameter()</code> 方法来获取参数。 jquery代码2： <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var data_json = $("#form_1").serializeArray();

data: data_json,</code></pre>

这里通过序列化函数，会自动把表单的数据转化为json数据格式，省去了手工封装成json的过程。 <h4>3.2 第二种封装的<code>json</code> 数据：数组形式</h4> 一旦<code>json</code> 数据变复杂，那么在servlet中就无法通过<code>getParameter()</code> 获取数据了。这个时候我们需要把<code>json</code> 数据先字符串化，使得<code>json</code> 在传输的时候就是原数据（打开调试台看到的<code>Form Data</code> 就和<code>json</code> 原数据一样）。 jquery代码： <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var sub=$("#sub"); var data_json=[{"sex": '男',"submit":"111"},{"sex": '女',"submit":"222"}]; sub.on("click",function () { $.ajax({ url:"/webTest/ajax2", type:"post", async:true, cache: false, data: JSON.stringify(data_json), // 先序列化json数据 success:function(data){ console.log(data); }, error:function(error){ console.log(error); } }) })" title="" data-original-title="复制"> </div> </div><pre class="javascript hljs"><code class="javascript">var sub=$("#sub"); var data_json=[{"sex": '男',"submit":"111"},{"sex": '女',"submit":"222"}]; sub.on("click",function () { $.ajax({ url:"/webTest/ajax2", type:"post", async:true, cache: false, data: JSON.stringify(data_json), // 先序列化json数据 success:function(data){ console.log(data); }, error:function(error){ console.log(error); } }) })</code></pre> 在这里，<code>json</code> 数据就是比较复杂的了，我们要先使用<code>JSON.stringify()</code> 序列化<code>json</code> 数据。 servlet代码： <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="BufferedReader reader = request.getReader(); // 获取请求的输出流 String jsonData = ""; jsonData += reader.readLine(); reader.close();

// 获取到一致的json数据 System.out.println(json); // [{"sex": '男',"submit":"111"},{"sex": '女',"submit":"222"}]" title="" data-original-title="复制"> </div> </div><pre class="java hljs"><code class="java">BufferedReader reader = request.getReader(); // 获取请求的输出流 String jsonData = ""; jsonData += reader.readLine(); reader.close();

// 获取到一致的json数据 System.out.println(json); // [{"sex": '男',"submit":"111"},{"sex": '女',"submit":"222"}]</code></pre>

java操作<code>json</code> 数据： 对于得到的<code>json</code> 数据，我们需要反序列，把我们需要的值给取出来。通常是使用<code>json</code> 的解析库，如GSON、fastJson等。这里我们使用GSON来讲解。 由于篇幅的原因，<code>GSON</code> 操作<code>json</code> 数据，序列化与反序列化的内容在另一章中进行讲解。总之，我们可以操作任何复杂的<code>json</code> 数据，并且从中取出我们需要的属性。 <h4>解读</h4> 得益于<code>json</code> 数据格式，使得前后端之间的数据交流变得十分方便。具体如何在java中操作json，请看有关于json的文章。 <h4>3.3 jquery的<code>ajax</code> 技术参数解读</h4> 在ajax的代码中，有几个参数比较重要。 1、 <code>contentType: "application/json;charset=utf-8"</code> 这个参数是指明提交的数据的数据类型，不指明的话，默认是： <code>Content-Type: application/x-www-form-urlencoded; charset=UTF-8</code> 。 而指明了数据格式为<code>json</code> 的话，在后台有些框架可以直接获取，比如说springmvc。 注意： 一旦使用了指明了数据类型是json之后，就应该使用<code>JSON.stringify()</code> 方法来处理json数据。在后台的处理程序中就无法使用<code>getParameter()</code> 方法来获取值了。 2、 <code>dataType:"json"</code> 这个参数是指明返回的数据的数据类型，不指明的话，默认是：<code>"text"</code> 。 <h3 id="articleHeader12">4、携带文本数据和文件数据，发送请求至servlet，接收返回数据</h3> 同样的一句话，只要涉及到文件数据，那么就是二进制流传输，是无法使用<code>getParameter()</code> 直接获取数据的。并且再啰嗦一句，之所以推荐使用ajax，就是因为它可以做到页面不跳转的提交。 <h4>4.1 使用FormData对象</h4> 我们还是可以选择是否使用表单，这也无所谓。当<code>multiple="multiple"</code> 时，可以一次上传多个文件。 表单： <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <input type="text" name="user" id="user"> <input type="file" name="file" multiple="multiple" id="file"> <input type="button" id="sub" value="submit it"/> </form>" title="" data-original-title="复制"> </div> </div><pre class="xml hljs"><code class="html"><form id="form_1"> <input type="text" name="user" id="user"> <input type="file" name="file" multiple="multiple" id="file"> <input type="button" id="sub" value="submit it"/> </form></code></pre> jquery代码： <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var formData = new FormData(); var name = $("input").val();

// formData对象放入值 formData.append("name",name); formData.append("file",$("#file")[0].files[0]); // 只选择第一个文件

$.ajax({ url : Url, type : 'POST', data : formData, processData : false, // 告诉jQuery不要去处理发送的数据 contentType : false, // 告诉jQuery不要去设置Content-Type请求头 success:function(data){ console.log(data); }, error:function(error){ console.log(error); } });" title="" data-original-title="复制"> </div> </div><pre class="javascript hljs"><code class="javascript">var formData = new FormData(); var name = $("input").val();

// formData对象放入值 formData.append("name",name); formData.append("file",$("#file")[0].files[0]); // 只选择第一个文件

$.ajax({ url : Url, type : 'POST', data : formData, processData : false, // 告诉jQuery不要去处理发送的数据 contentType : false, // 告诉jQuery不要去设置Content-Type请求头 success:function(data){ console.log(data); }, error:function(error){ console.log(error); } });</code></pre>

当然，我们可以直接传入表单对象。这样更加快速。 <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var form_1 = document.getElementById("form_1"); var formData = new FormData(form_1);

data: formData," title="" data-original-title="复制"> </div> </div><pre class="hljs typescript"><code>var form_1 = document.getElementById("form_1"); var formData = new FormData(form_1);

data: formData,</code></pre>

<h2 id="articleHeader13">四、谢幕</h2> 关于前端的表单提交数据至后台servlet的总结就先告一段落了。内容上可以分成2块，一是直接使用<code>action</code> 的表单提交，二是使用<code>ajax</code> 技术模拟的表单提交。而在数据上又可以分成2块，一是只含有文本数据，而是含有上传文件。

来源：oschina

链接：https://my.oschina.net/u/4419748/blog/3428194

标签

codetool

tooltip

jquery

java

javascript