jQuery Form Plugin：AJAX方式提交表单的完全方案

常炯

2023-12-01

简介

jQuery Form Plugin可以简便且隐式地使用AJAX改善HTML表单（Form）。主要的函数ajaxForm和ajaxSubmit从表单元素中收集信息然后决定如何管理提交过程。这两个函数都支持很多的选项，它们可以使你完全控制数据的提交方式。用AJAX提交表单再没有jQuery Form Plugin更方便的了。

开发这个插件经过了一个团队的努力，许多人为它贡献各种点子和代码：

John Resig、Mike Alsup、Mark Constable、Klaus Hartl、Matt Grimm、Yehuda Katz、Jörn Zaefferer、Sam Collett、Gilles van den Hoven、Kevin Glowacz、Alex Andrienko
快速入门

1.

在页面中加入表单。无需加入特殊的标记，仅仅是一个正常的表单：
[html] view plaincopy
1. <form id="myForm" action="comment.php" method="post"> 
2. Name: <input type="text" name="name" /> 
3. Comment: <textarea name="comment"></textarea> 
4. <input type="submit" value="Submit Comment" /> 
5. </form> 
2.

包含jQuery和jQuery Form Plugin的脚本文件，然后在DOM加载后使用简短的脚本来初始化表单：
[html] view plaincopy
1. <html> 
2. <head> 
3. <script type="text/javascript" src="jquery-1.3.2.js"></script> 
4. <script type="text/javascript" src="jquery.form.js"></script> 
5. 
6. <script type="text/javascript"> 
7. // 等待DOM加载 
8. $(document).ready(function() { 
9. // 绑定"#myForm"，然后加入回调函数 
10. $('#myForm').ajaxForm(function() { 
11. alert("Thank you for your comment!"); 
12. }); 
13. }); 
14. </script> 
15. </head> 
16. ... 

当表单被提交时，name和comment字段会被post到comment.php。如果服务器返回成功状态，用户将收到”Thank you for your comment!”的消息。

下载

可以点击这里下载或者访问这里http://github.com/malsup/form 。

jQuery Google Group（http://groups.google.com/group/jquery-en/topics ）提供了对jQuery Form Plugin的支持，这是个很活跃的论坛，许多的jQuery开发者和用户都订阅了它。
jQuery Form Plugin的API

jQuery Form Plugin的API提供了多种方法来控制表单的数据以及表单的提交。

*

ajaxForm ———— 为将要提交的表单绑定必要的事件处理函数。这个函数不提交表单。一般是当DOM加载后即调用ajaxForm来准备AJAX提交。ajaxForm的参数可选。唯一的参数可以是一个回调函数或者是一个选项对象（Options）。可以链式调用，即返回调用对象本身。可以为ajaxForm传递标准的$.ajax() 的选项。

示例：
[javascript] view plaincopy
1. $('#myFormId').ajaxForm(); 
*

ajaxSubmit ———— 立即通过AJAX提交表单。最常见的是当用户点击提交按钮时调用。ajaxSubmit的参数同ajaxForm。同样可以链式调用。其参数同样可为$.ajax()的选项。

示例：
[javascript] view plaincopy
1. // 为表单的提交事件绑定事件处理函数 
2. $('#myFormId').submit(function() { 
3. // 提交表单 
4. $(this).ajaxSubmit(); 
5. // 返回false以防止浏览器的默认操作，即刷新页面的提交方式 
6. return false; 
7. }); 
*

formSerialize ———— 将表单数据序列化成查询字符串。这个函数将返回以下格式：name1=value1&name2=value2。不可链式调用，这个函数返回字符串。

示例：
[javascript] view plaincopy
1. var queryString = $('#myFormId').formSerialize(); 
2. 
3. // 这个数据现在可以通过$.get, $.post, $.ajax等来提交 
4. $.post('myscript.php', queryString); 
*

fieldSerialize ———— 将字段数据序列化成查询字符串。当只需要序列化表单的一部分时，这个函数很方便。这个函数返回以下格式的字符串： name1=value1&name2=value2。不可链式调用。

示例：
[javascript] view plaincopy
1. var queryString = $('#myFormId .specialFields').fieldSerialize(); 
*

fieldValue ———— 返回一个数组，包含指定元素的值。在.91版中，这个方法总是返回数组。如果没有有效的值可以确定，这个数组将是空的，反之它将包含一个或多个值。不可链式调用。

示例：
[javascript] view plaincopy
1. // 获取密码控件的值 
2. var value = $('#myFormId :password').fieldValue(); 
3. alert('The password is: ' + value[0]); 
*

resetForm ———— 通过调用原始的DOM方法来重置表单到原始状态。可链式调用。

示例：
[javascript] view plaincopy
1. $('#myFormId').resetForm(); 
*

clearForm ———— 清空表单元素。这个函数清空所有文本框，密码框，textarea元素，取消select元素和单选框多选框的选择。可以链式调用。

示例：
[javascript] view plaincopy
1. $('#myFormId').clearForm(); 
*

clearFields ———— 清空表单元素。当只需要清空表单的某个（些）元素时，这个方法很方便。可链式调用。

示例：
[javascript] view plaincopy
1. $('#myFormId .specialFields').clearFields(); 

ajaxForm 和 ajaxSubmit 的选项

除了以下列出的选项，你也可以给这两个函数传递标准$.ajax的选项。

*

target ———— 指定页面中的哪些元素用于响应服务器端的更新。这个值可以是jQuery查询字符串，或者它指定的jQuery对象，或者是DOM元素。默认值：null
*

replaceTarget ———— 配合target选项使用。当被设置为true时，target指定的部分将被替换，否则只替换它的内容。默认值：false
*

url ———— 指定数据要提交到的URL。默认值：表单的action属性值
*

type ———— 指定表单提交的方式：’GET’或者’POST’。默认值：表单的method属性值（若无则为’GET’）
*

data ———— 要同表单一起提交的额外数据，格式：data: { key1: ‘value1′, key2: ‘value2′ }
*

dataType ———— 服务器响应的数据类型，值可以为：null, ‘xml’, ‘script’, 或者’json’。这个选项指定服务器端的响应如何处理。它直接映射到了jQuery.httpData方法。如果dataType为’xml’，则服务器的响应将被看成是XML，’success’回调函数将被传入responseXML的值。如果dataType为’json’，则服务器的响应将被看成是JSON对象（通过eval），并传给’success’回调函数。如果dataType为’script’，则服务器的响应将被eval成全局上下文。默认值：null
*

beforeSerialize ———— 表单序列化前的回调函数。它提供了一个机会以在值被获取前控制表单。其中的一个参数是表单的jQuery对象，另一个是传给 ajaxForm/ajaxSubmit的选项对象。默认值：null
[javascript] view plaincopy
1. beforeSerialize: function($form, options) { 
2. // 返回false将取消提交操作 
3. } 
*

beforeSubmit ———— 表单提交前的回调函数。一般用于处理表单提交前的逻辑，如验证表单数据。如果这个回调函数返回false，提交操作将被取消。它的三个参数分别是表单数据组成的数组，表单的jQuery对象，传给ajaxForm/ajaxSubmit的选项对象。默认值：null
[javascript] view plaincopy
1. beforeSubmit: function(arr, $form, options) { 
2. // 第一个参数的格式： 
3. // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 
4. 
5. // 返回false将取消提交操作 
6. } 
*

success ———— 表单被成功提交后，服务器端产生响应时的回调函数。它将被传入以下参数：

1. responseText 或者 responseXML 的值（取决于dataType选项的值）

2. statusText

3. xhr(XMLHttpRequest对象)（若jQuery的版本小于1.4，则为jQuery封装过的表单元素）

4. jQuery封装过的表单元素（若jQuery的版本小于1.4，则为undefined）

默认值：null
*

semantic ————— 指定提交的数据是否遵循语义上的顺序（较正常方式慢）。注意一般情况下表单的序列化都遵循语义上的顺序，除非有image类型的控件。只有当服务器对提交的数据的语义上的顺序有严格要求而且表单含有image类型的控件时才设置为true。默认值：false
*

resetForm ———— 当成功提交时是否重置表单。默认值：null
*

clearForm ———— 当成功提交时是否清除表单。默认值：null
*

iframe ———— 是否总是将服务器的响应放在iframe里面。默认值：false
*

iframeSrc ———— 如果iframe选项为true，则要添加到iframe中的src属性。默认值：about:blank，使用https协议的页面的默认值为：javascript:false
*

forceSync ———— 指定是否在上传文件或者使用iframe选项提交表单时去除短时间的延迟。这个延迟用于浏览器在进行原始的提交操作前渲染DOM。通过它给用户提示如”请稍候”，这改善了可用性。默认值：false

选项示例：
[javascript] view plaincopy

1. // 准备选项对象 
2. var options = { 
3. target: '#divToUpdate', 
4. url: 'comment.php', 
5. success: function() { 
6. alert('Thanks for your comment!'); 
7. } 
8. }; 
9. 
10. // 把选项对象传递给ajaxForm函数 
11. $('#myForm').ajaxForm(options); 

$j(document).ready(function(){
$j("#trainingForm").submit(function(){
if(checkForm()){
var options={
//target:"#it_result",//后台将把传递过来的值赋给该元素
url:"haUsageTraining.do?action=SaveQuestionnaireInfo",//处理文件地址
type:"POST",
success:function(){
alert("成功，谢谢您的参与！");
window.returnValue='';
window.close();
}
};
$j("#trainingForm").ajaxSubmit(options);
return false;
}else{
return false;
}

});
});

jQuery Form Plugin：AJAX方式提交表单的完全方案

相关阅读

相关文章

相关问答

相关文档