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