html 表单提交插件,jquery提交form表单插件jquery.form.js

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; //阻止表单默认提交

});

懒人建站整理编辑

↓ 查看全文