jquery.form.js提交form表单 上传文件

jquery.form.js提交form表单插件提供了表单ajaxe提交解决方案，下面对比一下使用jquery自己的ajax提交和jquery.form的提交由啥不同。 通常没有使用jquery.form插件的情况下我们可以像下面代码来提交表单： //jquery ajax 方式提交表单 var $form = $("#form"), action = $form.attr("action"); $form.on("submit",function(){ $.post(action,$form.serialize(),function(res){ //请求成功代码在这里 alert("提交成功！"); },'json'); return false }); ==================================== //jquery.form.js 的ajax提交表单 $('#form2').submit(function() { $(this).ajaxSubmit(function() { alert("提交成功！"); }); return false; //阻止表单默认提交 }); jquery.form.js中ajaxSubmit()可以像上面代码一样只传递一个成功的回调函数，也可以传递更多参数，参数如下： //jquery.form.js 中的ajaxSubmit() 可以是一个回调函数或者是更多参数，如下： var options = { //url: url, //默认是form的action //type: type, //默认是form的method（get or post） //dataType: null, //html(默认), xml, script, json...接受服务端返回的类型 //clearForm: true, //成功提交后，清除所有表单元素的值 //resetForm: true, //成功提交后，重置所有表单元素的值 //target: '#output', //把服务器返回的内容放入id为output的元素中 //timeout: 3000, //限制请求的时间，当请求大于3秒后，跳出请求 //提交前的回调函数 beforeSubmit: function(formData, jqForm, options){ //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}] //jqForm: jQuery对象，封装了表单的元素 //options: options对象 //比如可以再表单提交前进行表单验证 }, //提交成功后的回调函数 success: function(data,status,xhr,$form){}, error: function(xhr, status, error, $form){}, complete: function(xhr, status, $form){} }; ==================== 下面我们来一段jquery.form表单提交的实战例子完整代码： $('#formLogin').on("submit",function() { //懒人建站整理 $(this).ajaxSubmit( { //url: url, //默认是form的action //type: type, //默认是form的method（get or post） //dataType: "json", //html(默认), xml, script, json...接受服务端返回的类型 //clearForm: true, //成功提交后，清除所有表单元素的值 //resetForm: true, //成功提交后，重置所有表单元素的值 target: '#output', //把服务器返回的内容放入id为output的元素中 //timeout: 3000, //限制请求的时间，当请求大于3秒后，跳出请求 //提交前的回调函数 beforeSubmit: function(arr,$form,options){ //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}] //jqForm: jQuery对象，封装了表单的元素 //options: options对象 //比如可以再表单提交前进行表单验证 console.log("beforeSubmit",arr,$form,options) }, //提交成功后的回调函数 success: function(data,status,xhr,$form){ console.log("success",data,status,xhr,$form); if(data.Flag){ console.log(data.Content) } }, error: function(xhr, status, error, $form){ console.log("error",xhr, status, error, $form) }, complete: function(xhr, status, $form){ console.log("complete",xhr, status, $form) } } ); return false; //阻止表单默认提交 });