jquery-form详解

jQuery-Form
概观

jQuery表单插件允许您轻松而不显眼地升级HTML表单以使用AJAX。主要方法ajaxForm和ajaxSubmit从表单元素收集信息以确定如何管理提交过程。这两种方法都支持多种选项，使您可以完全控制数据的提交方式。

不需要特殊的标记，只是一个正常的形式。用AJAX提交表单并不容易！
兼容性
需要jQuery 1.7.2或更高版本。
与jQuery 2兼容。
部分与jQuery 3兼容。
与jQuery 3 Slim 不兼容。（问题＃544）
下载
开发： src / jquery.form.js
生产/缩小： dist / jquery.form.min.js
CDN
< script  src = “ https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js ”  integrity = “ sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK + frTVqZeNDFl8woCbF0CYG6g2fMEFFo / i ”  crossorigin = “ anonymous “ > </ script >
< script  src = “ https://cdn.jsdelivr.net/gh/jquery-form/form@4.2.2/dist/jquery.form.min.js ”  integrity = “ sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK + frTVqZeNDFl8woCbF0CYG6g2fMEFFo / i ”  crossorigin = “ anonymous ” > </ script >
API
jqXHR
jqXHR对象在每次 调用后都使用键存储在元素数据缓存中。它可以像这样访问：jqxhrajaxSubmit
var form =  $（' #myForm '）。ajaxSubmit（{ / * options * / }）;
var xhr =  form。数据（' jqxhr '）;

xhr。done（function（）{
 ... 
}）;
ajaxForm（选项）
通过添加所有必要的事件侦听器来准备要通过AJAX提交的表单。它并没有提交表单。ajaxForm在您的文档ready函数中使用，为现有的AJAX提交表单准备，或者delegation选择处理尚未添加到DOM的表单。
当你希望插件为你管理所有的事件绑定时使用ajaxForm。
//为ajax提交
$（ ' form '）准备所有表单。ajaxForm（{
	target ： ' #myResultsDiv ' 
}）;
ajaxSubmit（选项）
立即通过AJAX提交表单。在最常见的用例中，这是为了响应用户单击表单上的提交按钮而调用的。如果要将自己的提交处理程序绑定到表单，请使用ajaxSubmit。
//绑定提交处理程序以形成
$（ ' form '）。在（ '提交'，函数（ ē）{
	 É。的preventDefault（）; //防止本地提交
	$（本）。 ajaxSubmit会（{
		目标： ' myResultsDiv '
	}）
}）;
选项
注意：可以使用所有标准的$ .ajax选项。
beforeSerialize
表单序列化之前调用的回调函数。提供了在检索其值之前操作表单的机会。false从回调中返回将阻止提交表单。这个回调函数有两个参数：jQuery封装的表单对象和options对象。
beforeSerialize ： function（$ form，options）{
     //返回false取消提交 
}
beforeSubmit
表单提交前调用的回调函数。false从回调中返回将阻止提交表单。回调函数有三个参数：数组格式的表单数据，jQuery包装的表单对象和选项对象。
beforeSubmit ： function（arr，$ form，options）{
     //表单数据数组是具有名称和值属性的对象数组
    // name {'name'，value：'jresig'}，{name：'password' ，value：'secret'}] 
    //返回false取消提交 
}
filtering
在处理字段之前调用回调函数。这提供了一种过滤元素的方法。
filtering: function(el, index) {
    if ( !$(el).hasClass('ignore') ) {
        return el;
    }
}
clearForm
布尔标志，指示如果提交成功，表单是否应该被清除
数据
包含应与表单一起提交的额外数据的对象。
data: { key1: 'value1', key2: 'value2' }
数据类型
预期的响应数据类型。其中之一：null，'xml'，'script'或'json'。dataType选项提供了一种指定应如何处理服务器响应的方法。这直接映射到jQuery的dataType方法。支持以下值：
'xml'：服务器响应被视为XML，'success'回调方法（如果指定）将被传递给responseXML值
'json'：服务器响应将被评估并传递给'成功'回调，如果指定的话
'脚本'：服务器响应在全局上下文中进行评估
delegation
true to enable support for event delegation requires jQuery v1.7+
// prepare all existing and future forms for ajax submission
$('form').ajaxForm({
    delegation: true
});
error
Deprecated
Callback function to be invoked upon error.
forceSync
只适用于明确使用iframe选项或者在不支持XHR2的浏览器上上传文件的情况。设置为true在上传文件时删除发布表单之前的短暂延迟。延迟用于允许浏览器在执行本地表单提交之前呈现DOM更新。当向用户显示通知时，这提高了可用性，例如“Please Wait ...”
Utility Methods
formSerialize
将表单序列化为查询字符串。这个方法将返回格式如下的字符串：name1=value1&name2=value2
var queryString =  $（' #myFormId '）.formSerialize（）;
fieldSerialize
将字段元素序列化为查询字符串。当你只需要序列化一部分表单时这很方便。这个方法将返回格式如下的字符串：name1=value1&name2=value2
var queryString =  $（' #myFormId .specialFields '）.fieldSerialize（）;
fieldValue方法
返回数组中匹配集中元素的值。这个方法总是返回一个数组。如果无法确定有效值，则数组将为空，否则将包含一个或多个值。
重置表格
通过调用表单元素的本地DOM方法将表单重置为其原始状态。
clearForm
清除表单元素。此方法清空所有文本输入，密码输入和textarea元素，清除所有选择元素中的选择，并取消选中所有无线电和复选框输入。它并不能清除隐藏字段值。
clearFields
清除选定的字段元素。当你只需要清除表格的一部分时，这很方便。
文件上传
表单插件支持在支持这些功能的浏览器上使用XMLHttpRequest Level 2和FormData对象。截至今天（2012年3月），包括Chrome，Safari和Firefox。在这些浏览器（以及未来的Opera和IE10）上，文件上传将通过XHR对象无缝地进行，并且在上载过程中进度更新可用。对于较老的浏览器，使用涉及iframe的回退技术。
查看原文：http://www.coder306.cn/?p=193