英文原文Qhttp://www.malsup.com/jquery/form/#api
表单插gAPI提供了几个方法,让你L理表单数据和进行表单提交?
ajaxForm
增加所有需要的事g监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来ؓAJAX提交表单q行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函敎ͼ也可以是一个Options对象?
可链接(ChainableQ:可以?
实例Q?
- $('#myFormId').ajaxForm();
$('#myFormId').ajaxForm();
ajaxSubmit
马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单q行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函敎ͼ也可以是一个Options对象?
可链接(ChainableQ:可以?
实例Q?
-
- $('#myFormId').submit(function() {
-
- $(this).ajaxSubmit();
-
- return false;
- });
// l定表单提交事g处理?
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// Z防止普通浏览器q行表单提交和生页面导航(防止面hQ)q回false
return false;
});
formSerialize
表单串行化Q或序列化)成一个查询字W串。这个方法将q回以下格式的字W串Qname1=value1&name2=value2?
可链接(ChainableQ:不能Q?q个Ҏq回一个字W串?
实例Q?
- var queryString = $('#myFormId').formSerialize();
-
-
- $.post('myscript.php', queryString);
var queryString = $('#myFormId').formSerialize();
// 现在可以使用$.get?.post?.ajax{来提交数据
$.post('myscript.php', queryString);
fieldSerialize
表单的字段元素串行化(或序列化Q成一个查询字W串。当只有部分表单字段需要进行串行化Q或序列化)Ӟq个方便了。这个方法将q回以下格式的字W串Qname1=value1&name2=value2?
可链接(ChainableQ:不能Q这个方法返回一个字W串?
实例Q?
- var queryString = $('#myFormId .specialFields').fieldSerialize();
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
q回匚w插入数组中的表单元素倹{从0.91版vQ该ҎL以数l的形式q回数据。如果元素D判定可能无效Q则数组为空Q否则它包含一个或多于一个的元素倹{?
可链接(ChainableQ:不能Q该Ҏq回数组?
实例Q?
-
- var value = $('#myFormId :password').fieldValue();
- alert('The password is: ' + value[0]);
// 取得密码输入?
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
resetForm
通过调用表单元素原有的DOMҎQ将表单恢复到初始状态?
可链接(ChainableQ:可以?
实例Q?
- $('#myFormId').resetForm();
$('#myFormId').resetForm();
clearForm
清除表单元素。该Ҏ所有的文本QtextQ输入字Dc密码(passwordQ输入字D和文本区域QtextareaQ字D늽I,清除Mselect元素中的选定Q以及将所有的单选(radioQ按钮和多选(checkboxQ按钮重|ؓ非选定状态?
可链接(ChainableQ:可以?
- $('#myFormId').clearForm();
$('#myFormId').clearForm();
clearFields
清除字段元素。只有部分表单元素需要清除时才方便用?
可链接(ChainableQ:可以?
- $('#myFormId .specialFields').clearFields();
$('#myFormId .specialFields').clearFields();
Options对象
ajaxForm和ajaxSubmit都支持众多的选项参数Q这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象Q它包含了如下一些属性与值的集合Q?
target
指明面中由服务器响应进行更新的元素。元素的值可能被指定Z个jQuery选择器字W串Q一个jQuery对象Q或者一个DOM元素?
默认|null?
url
指定提交表单数据的URL?
默认|表单的action属性?
type
指定提交表单数据的方法(methodQ:“GET”?#8220;POST”?
默认|表单的method属性|如果没有扑ֈ默认?#8220;GET”Q?
beforeSubmit
表单提交前被调用的回调函数?#8220;beforeSubmit”回调函数作ؓ一个钩子(hookQ,被提供来q行预提交逻辑或者校验表单数据。如?#8220;beforeSubmit”回调函数q回falseQ那么表单将不被提交?#8220;beforeSubmit”回调函数带三个调用参敎ͼ数组形式的表单数据,jQuery表单对象Q以及传入ajaxForm/ajaxSubmit中的Options对象。表单数l接受以下方式的数据Q?
- [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
默认|null
success
表单成功提交后调用的回调函数。如果提?#8220;success”回调函数Q当从服务器q回响应后它被调用。然后由dataType选项值决定传回responseTextq是responseXML的倹{?
默认|null
dataType
期望q回的数据类型。null?#8220;xml”?#8220;script”或?#8220;json”其中之一。dataType提供一U方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpDataҎ中去。下面的D支持Q?
'xml'Q如果dataType == 'xml'Q将把服务器响应作ؓXML来对待。同Ӟ如果“success”回调Ҏ被指定, 传回responseXML倹{?
'json'Q如果dataType == 'json'Q?服务器响应将被求|q传递到“success”回调ҎQ如果它被指定的话?
'script'Q如果dataType == 'script'Q?服务器响应将求值成U文本?
默认|nullQ服务器q回responseText|
semantic
Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
布尔标志Q表C数据是否必M格按照语义顺序(slowerQ)来进行提交。注意:一般来_表单已经按照语义序来进行了串行化(或序列化Q,除了type="image"的input元素。如果你的服务器有严格的语义要求Q以及表单中包含有一个type="image"的input元素Q就应该semantic讄为true。(译注Q这一D는于无法理解,译出来可能语不达意Q但误人指正。)
默认|false
resetForm
布尔标志Q表C如果表单提交成功是否进行重|?
Default value: null
clearForm
布尔标志Q表C如果表单提交成功是否清除表单数据?
默认|null
实例Q?
-
- var options = {
- target: '#divToUpdate',
- url: 'comment.php',
- success: function() {
- alert('Thanks for your comment!');
- } };
-
-
- $('#myForm').ajaxForm(options);
// 准备好Options对象
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
} };
// options传给ajaxForm
$('#myForm').ajaxForm(options);
注意QOptions对象q可以用来将g递给jQuery?.ajaxҎ。如果你熟悉$.ajax所支持的optionsQ你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit?