使⽤ajax提交form表单，包括ajax⽂件上传
前⾔
使⽤ajax请求数据，很多⼈都会，⽐如说：
$.post(path,{data:data},function(data){
...
},"json");
⼜或者是这样的ajax
$.ajax({
url:"${tPath}/public/testupload",
type:"post",
data:{username:username},
success:function(data){
分销小程序源码网window.clearInterval(timer);
console.log("over..");
},
error:function(e){
alert("错误！！");
window.clearInterval(timer);
}
});
同样的，很多⼈也会。但是写的越多就越会发现，这样⼦虽然可以避免刷新页⾯，但是我们要写⼤量的js来到得数据：
var username = $("#username").val();
jquery下载文件进度条var password = $("#password").val();
...
如果数量少的话，那还没有什么，但是如果数据⼗分⼤的话，那就⼗分的⿇烦，那有没有什么简单的⽅法呢？答案肯定有的！下⾯介绍两种⽅法，可以极⼤的提⾼开发⼈员的效率。
⽅法
⽅法⼀：使⽤FormData对象
FormData对象是html5的⼀个对象，⽬前的⼀些主流的浏览器都已经兼容。额，如果你说ie8什么的，那我们还是来谈谈今天的天⽓吧，我没听见。呵呵，开个玩笑，不⽀持FormData的，可以使⽤⽅法⼆，下⾯会介绍。接着说FormData，它是⼀个html5的javascript对象，⾮常的强⼤。
FormData可以凭空创建⼀个对象，然后往这个对象⾥⾯添加数据，然后直接提交，不需要写⼀⾏html代码，如下：var form = new FormData();
form.append("username","zxj");
form.append("password",123456);
var req = new XMLHttpRequest();
req.open("post", "${tPath}/public/testupload", false);
req.send(form);
这样就可以向浏览器发送表单数据了，或者也可以使⽤Jquery这样发送：
var form = new FormData();
form.append("username","zxj");
form.append("password",123456);
$.ajax({
url:"${tPath}/public/testupload",
type:"post",
data:form,
processData:false,
网站计数器是啥contentType:false,
success:function(data){
window.clearInterval(timer);
console.log("over..");
}
});
这样也可以直接发送数据到后台。
你以为这就完了？不！这才刚开始呢！！
其次FormData还⽀持直接从html中的表单⽣成数据，就是在html页⾯中已经有数据了，然后FormData可以直接把这个表单的数据写⼊这个对象，然后直接提交给后台
代码如下，先给出html代码:
<form id="tf">
<input type="file" name="img"/>
<input type="text" name="username"/>
<input type="button" value="提" onclick="test();"/>
.............
</form>
⼤家注意到没有，⾥⾯可是有⽂件的哦！
没错，FormData还⽀持困扰众多开发者已久的ajax的上传⽂件，以前我们上传⽂件，需要写⼀个表单直接刷新提交，但是这⾥不需要，下⾯给出提交代码：
function test(){
var form = new ElementById("tf"));
// var req = new XMLHttpRequest();
// req.open("post", "${tPath}/public/testupload", false);
// req.send(form);
$.ajax({
url:"${tPath}/public/testupload",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
window.clearInterval(timer);
console.log("over..");
},
error:function(e){
alert("错误！！");
window.clearInterval(timer);
}
});
get();//此处为上传⽂件的进度条
}
就是这么简单，使⽤FormData，在构造这个对象的时候，把表单的对象，作为⼀个参数放进去，就可以了，然后FormData，就会得到这个表单对象⾥⾯的所有的参数，甚⾄我们在表单中，都不需要声明enctype ="multipart/form-data" ，就可以直接提交。
使⽤FormData，第⼀是在提交表单的时候，不需要写⼤量的js来获得表单数据，直接把表单对象构造
就⾏了。第⼆就是可以直接异步上传⽂件，简单⽜逼爆了！
注意：使⽤FormData提交的时候，⼤家会注意到表单提交的是request payload，具体有兴趣的同学可以⾃⼰百度，它不是之前的Form data 提交的，所以后台也是要经过处理的，⽐如springMVC就需要配置
<!-- 配置nultipartresolver，注意：id名必须这样写，不然会报错 -->
<bean id="multipartResolver" class="org.springframework.web.multipartmons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"></property>
<property name="maxInMemorySize" value="10240000"></property>
</bean>
不然会接收不到数据，当然，后台的话，我们这⾥就先不管。
⽅法⼆：使⽤jquery.form.js
Jquery.form.js是⼀个强⼤的表单插件，其⼤量的提供了表单操作的各种简便的⽅法，下⾯给出⼀些Jquery.form.js的说明：
hcia securityajaxForm 增加所有需要的事件，为ajax提交表单做准备。ajaxForm并
不能提交表单。在document的ready函数中，使⽤ajaxForm来为
ajax提交表单进⾏准备。
接受0个或1个参数。参
数可以是⼀个回调函数，
也可以是⼀个Options对
象。
$("#formid").ajaxForm();
$("#formid").ajaxSubmit();
ajaxSubmit使⽤ajax提交表单。接受0个或1个参数。参
数可以是⼀个回调函数，
也可以是⼀个Options对
象。
或
$("#formid").submit(function(){
$(this).ajaxSubmit();
return false;
});
formSerialize将表单串⾏化（或序列化）为⼀个查询字符串。这个⽅法将返回以
下格式的字符串：name1=value1&name2=value2。女生学java好吗什么意思
⽆$("#formid").formSerialize();
fieldSerialize 将表单的字段元素串⾏化（或序列化）为⼀个查询字符串。当只有
部分表单字段需要进⾏串⾏化（或序列化）时，使⽤这个就很⽅便
了。返回以下格式的字符串：name=value1&name2=value2。
⽆
$("#formid
.specialFields").fieldSerialize();
fieldValue返回匹配插⼊数组中的表单元素值。该⽅法以数组的形式返回数据。如果元素值被判定可能⽆效，则数组为空。⽆
$("#formid
:password").fieldValue();
jqgrid colmodelresetForm将表单恢复到初始状态。⽆$("#formid").resetForm();
clearForm 清除表单元素。该⽅法将所有的text、password、textarea置空，清
除select元素中的选定，以及所有radio按钮和checkbox按钮重置为
⾮选定状态。
⽆$("#formid").clearForm();
clearFields清除字段元素。只有部分表单元素需要清除时⽅便使⽤。⽆$("#formid
.specialFields").clearFields();
Options对象
ajaxForm和ajaxSubmit都⽀持众多的选项参数，这些选项参数可以使⽤⼀个Options对象来提供。
target指明页⾯中由服务器响应进⾏更新的元素。元素的值可能被指定为⼀个jQuery选择器字符串、⼀个jquery对象、⼀个DOM元素。
默认值：null
url指定提交表单数据的URL。默认值：表单的
action属性值type指定提交表单数据的⽅法（method）：“GET”或“POST”。默认值：GET
beforeSubmit表单提交前被调⽤的回调函数。如果回调函数返回false表单将不被提交。回调函数带三个调⽤参数：数组形式的表单数据，jQuery表单对象，以及传⼊ajaxForm/ajaxSubmit中的Options对象。
默认值：null success表单成功提交后调⽤的回调函数。然后dataType选项值决定传回responseText还是responseXML的值。默认值：null dataType返回的数据类型：null、"xml"、"script"、"json"其中之⼀。默认值：null resetForm表⽰如果表单提交成功是否进⾏重置。默认值：null clearForm表⽰如果表单提交成功是否清除表单数据。默认值：null
那么现在来说⼀些它的主要⽤法吧！
它也⽀持对⼀个表单的ajax提交，⽽且提交⽅式更为简便，如下：
html:
<form id="tf">
<input type="file" name="img"/>
<input type="text" name="username"/>
<input type="button" value="提" onclick="test();"/>
</form>
下⾯使⽤jquery.form.js的表单插件来提交表单
$("#tf").ajaxSubmit();
额，就是这么简单，你也不要问我为什么就是这么简单，然后它就是会把整个表单，作为⼀个ajax来提交，同样的，它也⽀持⽂件上传！⼀些其它的⽤法，请参照前⾯给出的说明就可以了！
感谢您的阅读，如果您觉得阅读本⽂对您有帮助，请点⼀下“推荐”按钮。本⽂欢迎各位转载，但是转载⽂章之后必须在⽂章页⾯中给出作者和原⽂连接
必须在⽂章页⾯中给出作者和原⽂连接。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论