jQuery Form Plugin：AJAX方式提交表单的完全方案
译自：http://www.malsup.com/jquery/form/
简介
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
快速入门
在页面中加入表单。无需加入特殊的标记，仅仅是一个正常的表单：
<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
包含jQuery和jQuery Form Plugin的脚本文件，然后在DOM加载后使用简短的脚本来初始化表单：
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// 等待DOM加载
$(document).ready(function() {
// 绑定"#myForm"，然后加入回调函数
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>
...
当表单被提交时，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() 的选项。
示例：
$('#myFormId').ajaxForm();
ajaxSubmit ———— 立即通过AJAX提交表单。最常见的是当用户点击提交按钮时调用。ajaxSubmit的参数同ajaxForm。同样可以链式调用。其参数同样可为$.ajax()的选项。
示例：
// 为表单的提交事件绑定事件处理函数
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// 返回false以防止浏览器的默认操作，即刷新页面的提交方式
return false;
});
formSerialize ———— 将表单数据序列化成查询字符串。这个函数将返回以下格式：name1=value1&name2=value2。不可链式调用，这个函数返回字dataType为’json’，则服务器的响应将被看成是JSON对象（通过eval），并传给’success’回调函数。如果dataType为’script’，则服务器的响应将被eval成全局上下文。默认值：null
beforeSerialize ———— 表单序列化前的回调函数。它提供了一个机会以在值被获取前控制表单。其中的一个参数是表单的jQuery对象，另一个是传给ajaxForm/ajaxSubmit的选项对象。默认值：null
beforeSerialize: function($form, options) {
// 返回false将取消提交操作
}
beforeSubmit ———— 表单提交前的回调函数。一般用于处理表单提交前的逻辑，如验证表单数据。如果这个回调函数返回false，提交操作将被取消。它的三个参数分别是表单数据组成的数组，表单的jQuery对象，传给ajaxForm/ajaxSubmit的选项对象。默认值：null
beforeSubmit: function(arr, $form, options) {
// 第一个参数的格式：
// [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
// 返回false将取消提交操作
}
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
选项示例：
// 准备选项对象
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
}
};
// 把选项对象传递给ajaxForm函数
$('#myForm').ajaxForm(options);
示例
官方网站上提供了丰富的示例，参见：http://www.malsup.com/jquery/form/#ajaxForm
其他细节
jQuery Form Plugin兼容jQuery v1.3.2及其更新的版本。
它不依赖其它插件。
它既快又准，甚至比Prototype和dojo都好，以下是一个对比：http://www.malsup.com/jquery/form/comp/
它经过了大量的单元测试以验证其强大功能，点击这里进行测试：http://www.malsup.com/jquery/form/test/
它同样支持文件的上传。
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ydmdzq_helloworld/archive/2010/09/08/5871442.aspx
