方法一：jquery的ajax方式，通过FormaData获取表单数据
（1）这种方式只需要jquery-1.7.js插件；
（2）通过`jquery中的FormaData类：
自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData；
(3)注意事项（上传文件）：
属性contentType设置为false:
设置为false之后就会使用form表单上的contentType的enctype=“multipart/form-data”；
属性processDataBoolean设置为false：
processDataBoolean(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
如果不设置这两个参数无法正常上传文件
var formData = new FormData($('form')[0]);
还可以用append添加额外的表单数据：
formData.append('b', 3);// 还可以添加额外的表单数据
（3）异步请求中的data直接为formData
success: completeHandler,error: errorHandler,data: formData,// Form数据contentType: false,//使用form的enctypeprocessData: false
完整页面代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>异步上传文件（jquery的ajax提交表单数据）</title><script type="text/javascript" src="${pageContext.request.contextPath}/common/js/jquery-1.7.js"></script></head><body><form enctype="multipart/form-data"><input name="file" type="file" /><input type="button" value="Upload" /></form><progress></progress></body><script type="text/javascript">$(':button').click(function(){var formData = new FormData($('form')[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData$.ajax({url: '<%=basePath %>upload/ajaxUpload.action', type: 'POST',xhr: function() { myXhr = $.ajaxSettings.xhr();if(myXhr.upload){ myXhr.upload.addEventListener('progress',progressHandlingFunction, false); }return myXhr;},//Ajax事件beforeSend: beforeSendHandler,success: completeHandler,error: errorHandler,// Form数据data: formData,cache: false,contentType: false,processData: false});});function progressHandlingFunction(e){if(e.lengthComputable){$('progress').attr({value:e.loaded,max:e.total});}}function beforeSendHandler() {alert("请求前");}function completeHandler() {alert("请求成功");}function errorHandler() {alert("请求错误");}</script></html>
方法二：通过插件jquery.form.js中的方法进行提交
（1）引入插件jquery.form.js和jquery-1.7.js插件；
（2）jquery.form.js的ajaxSubmit()方法进行提交；
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib uri="/jsp/jstl/core" prefix="c" %><%@ taglib uri="/jsp/jstl/fmt" prefix="fmt"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.4.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.form.js"></script><script type="text/javascript">function submitImgSize1Upload(){var option = {type:"post",url:'${pageContext.request.contextPath}/upload/uploadPic.do',dataType:'text',data:{fileName:'imgSize1File'},success:function(data){var jsonObj = $.parseJSON(data);$("#imgSize1ImgSrc").attr("src",jsonObj.fullPath);$("#imgSize1").val(jsonObj.ralativePath);}}$("#itemForm").ajaxSubmit(option);}</script><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>修改商品信息</title></head><body> <form id="itemForm" action="${pageContext.request.contextPath }/items/updateItems.do" method="post"><input type="hidden" name="id" value="${item.id }"/>修改商品信息：<table width="100%" border=1><tr><td>商品名称</td><td><input type="text" name="name" value="${item.name }"/></td></tr><tr><td>商品价格</td><td><input type="text" name="price" value="${item.price }"/></td></tr><tr><td>商品生产日期</td><td><input type="text" name="createtime" value="<fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/>"/></td></tr><tr><td>商品图片</td><td><p><label></label><img id='imgSize1ImgSrc' src='' height="100" width="100" /><input type='file' id='imgSize1File' name='imgSize1File' class="file" onchange='submitImgSize1Upload()' /><span class="pos" id="imgSize1FileSpan">请上传图片的大小不超过3MB</span><input type='hidden' id='imgSize1' name='pic' value='' reg="^.+$" tip="亲！您忘记上传图片了。" /></p> </td></tr><tr><td>商品简介</td><td><textarea rows="3" cols="30" name="detail">${item.detail }</textarea></td></tr><tr><td colspan="2" align="center"><input type="submit" value="提交"/></td></tr></table></form></body></html>
方法三：通过插件jquery.form.js中的方法进行提交
（1）引入插件jquery.form.js和jquery-1.7.js插件；
（2）jquery.form.js的ajaxForm()方法进行提交,简单实用案例如下；
<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript" src="js/jquery-1.11.1.js" ></script><script type="text/javascript" src="js/jquery.form.js" ></script><script type="application/javascript">$(function() {$("#inputForm").ajaxForm();$("#submitBtn").click(function() {$("#inputForm").submit();});})</script><title>ajaxForm的简单用法</title></head><body><h1>说明：</h1><p>ajaxForm预处理将要使用 AJAX 方式提交的表单，将所有需要用到的事件监听器添加到其中。</p><p>它不是提交这个表单。 </p><p>在页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 </p><p>ajaxForm 需要零个或一个参数。</p><p>这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。</p><p>是否可以连环调用: 是。</p><h1>触发条件：</h1><p>（1）当点击type为submit的按钮时；</p><p>（2）调用$("inputForm").submit()时；</p><br /></p><form id="inputForm" action="http://127.0.0.1:8020/jquery/index.html">姓名：<input type="text" name="name" value="" class="required"/>年龄：<input type="text" name="age" value=""/><input type="submit" value="提交"/><button type="button" id="submitBtn">提交按钮</button></form></body></html>
jquery.form.js上传文件注意事项：
（1）jquery.form.js插件上传文件时，如果选择了文件，没有添加
contentType : "multipart/form-data",
插件会自动添加，并按照上传文件的格式对请求参数进行编码：
请求类型multipart/form-data， 并且对请求参数进行编码， 有边界符：
Content-Type:multipart/form-data; boundary=----，
但是如果没有选择文件，则请求头为默认值
contentType ：“application/x-www-form-urlencoded”,不会有边界符，
即jquery.form.js会根据是否有选中文件进行更改请求类型；
（2）如果手动为jquery.form.js请求添加contentType:
contentType : "multipart/form-data",
如果不选中文件，请求类型为multipart/form-data，但是由于没有选中文件，并不会按照有边界符那样对请求参数进行编码，这样这个请求传到后台无法被解析即badRequest, 即手动添加之后multipart/form-data，必须选择文件；
（3）上述两种情况都是在form表单上没有添加enctype=“multipart/form-data”，
如果在form表单上添加enctype=“multipart/form-data”，如下：
<form id="testForm" method="post" enctype="multipart/form-data">....</form>
无论是否选中文件都会按照请求类型为multipart/form-data， 并且对请求参数进行编码， 有边界符：
Content-Type:multipart/form-data; boundary=----这样后台能够成功解析数据；
（4）如果文件不是必须上传的最好在在form表单上添加enctype=“multipart/form-data”，这样无论是否选中文件，后台都能够正确解析请求；
成功请求的信息：
Request URL:http://127.0.0.1:8080/BusinessCollaboration/CertificateTrail/upcertificateTrail.doRequest Method:POSTStatus Code:200 OKRemote Address:127.0.0.1:8080Response Headersview sourceAccess-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, AcceptAccess-Control-Allow-Methods:POST, GET, DELETEAccess-Control-Allow-Origin:*Access-Control-Max-Age:3600Content-Type:application/json;charset=UTF-8Date:Mon, 14 Aug 07:10:18 GMTServer:Apache-Coyote/1.1Set-Cookie:JSESSIONID=3B76CBB4E4331614418FDA6503902F19; Path=/BusinessCollaboration; HttpOnlyTransfer-Encoding:chunkedRequest Headersview sourceAccept:application/json, text/javascript, */*; q=0.01Accept-Encoding:gzip, deflateAccept-Language:zh-CN,zh;q=0.8Connection:keep-aliveContent-Length:970Content-Type:multipart/form-data; boundary=----WebKitFormBoundary4fmP5aWEvpgYodBoHost:127.0.0.1:8080Origin:http://127.0.0.1:8020Referer:http://127.0.0.1:8020/BusinessCollaboration/html/management/upCertificateTrail.htmlUser-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36Request Payload------WebKitFormBoundary4fmP5aWEvpgYodBoContent-Disposition: form-data; name="id"59------WebKitFormBoundary4fmP5aWEvpgYodBoContent-Disposition: form-data; name="traceCredentialsStr"afd------WebKitFormBoundary4fmP5aWEvpgYodBoContent-Disposition: form-data; name="file"------WebKitFormBoundary4fmP5aWEvpgYodBoContent-Disposition: form-data; name="traceSendRule"sdfwe------WebKitFormBoundary4fmP5aWEvpgYodBoContent-Disposition: form-data; name="traceReceiveRule"67567------WebKitFormBoundary4fmP5aWEvpgYodBoContent-Disposition: form-data; name="projectId"371------WebKitFormBoundary4fmP5aWEvpgYodBoContent-Disposition: form-data; name="templateId"2------WebKitFormBoundary4fmP5aWEvpgYodBoContent-Disposition: form-data; name="coordinationSystemId"24------WebKitFormBoundary4fmP5aWEvpgYodBoContent-Disposition: form-data; name="coordinationOrganizationId"344------WebKitFormBoundary4fmP5aWEvpgYodBo--NameupCertificateTrail.htmlbootstrap.min.cssmain.cssstyle.cssjquery-1.11.3.min.jsbootstrap.min.jsangular.min.jsurl.jscertificateTrail.jsjquery.form.jsjquery.page.jsnav2.pngbtn_80.pngselectdepart.do?templateId=2selectsystem.do?templateId=2&departid=344upcertificateTrail.do32 requests ❘ 1.0 MB transferredConsolePreserve log
错误请求：请求类型为Content-Type:multipart/form-data，但没有按照相应格式编码，无法解析；
Request URL:http://127.0.0.1:8080/BusinessCollaboration/CertificateTrail/upcertificateTrail.doRequest Method:POSTStatus Code:500 Internal Server ErrorRemote Address:127.0.0.1:8080Response Headersview sourceAccess-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, AcceptAccess-Control-Allow-Methods:POST, GET, DELETEAccess-Control-Allow-Origin:*Access-Control-Max-Age:3600Connection:closeContent-Language:zh-CNContent-Length:923Content-Type:text/html;charset=UTF-8Date:Mon, 14 Aug 07:06:53 GMTServer:Apache-Coyote/1.1Set-Cookie:JSESSIONID=5B59FEB6F46F3018F2693836138B8FA0; Path=/BusinessCollaboration; HttpOnlyRequest Headersview sourceAccept:application/json, text/javascript, */*; q=0.01Accept-Encoding:gzip, deflateAccept-Language:zh-CN,zh;q=0.8Connection:keep-aliveContent-Length:174Content-Type:multipart/form-dataHost:127.0.0.1:8080Origin:http://127.0.0.1:8020Referer:http://127.0.0.1:8020/BusinessCollaboration/html/management/upCertificateTrail.htmlUser-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36Request Payloadid=56&traceCredentialsStr=998%E5%9C%B0%E5%BA%9C&file=&traceSendRule=876&traceReceiveRule=768&projectId=371&templateId=2&coordinationSystemId=24&coordinationOrganizationId=344NameupcertificateTrail.doupcertificateTrail.do2 requests ❘ 2.8 KB transferredConsolePreserve log
总结：
插件jquery.form.js中ajaxForm和ajaxSubmit的区别：
（1）这两种方法主要的区别是ajaxForm不能主动提交form，函数只是为提交表单做准备需要以submit来触发提交。
（2）而ajaxSubmit会主动提交表单，同时可以在点击其他按钮时也可以触发提交，不一定是submit按钮。
（3）使用ajaxSubmit提交，不能使用button标签绑定异步提交事件，在form表单里的button会自动绑定提交表单事件，这样会出现刷新页面的问题；
<form id="uploadForm" enctype="multipart/form-data">文件：<input type="file" name="file"><button onclick="submitUploadForm()">提交</button><!-- 在form表单里的button会自动绑定提交表单事件，这样会出现刷新页面的问题 --><input type="button" onclick="submitUploadForm()" value="提交"></form>
jquery.form.js的帮助文档连接地址/jquery/form/
$.ajax 和 jquery.form.js实现表单异步提交/yiyiwudian/article/details/39554731
