7.2 jQuery表单插件—Form
7.2 jQuery表单插件—Form
7.2.1 Form插件简介
jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法—ajaxForm()和ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能。另外，插件还包括其他的一些方法：formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()和resetForm()等。
Mike Alsup设计了jQuery Form插件，并进行改善和维护。
7.2.2 下载地址
jQuery Form表单插件的下载地址为：
http://jquery.malsup.com/form/#download
在图7-9所示的界面中，读者可以下载该插件，并在该网站上查看简单上手说明、API、实例代码。文件上传说明和FAQ等。
[插图]
7.2.3 快速上手
在HTML页面上添加一个form表单，然后引入jQuery库和Form插件，并编写Ajax提交jQuery代码如下：
[插图]
当表单被提交时，“姓名”、“地址”和“自我介绍”字段的值会以无刷新的方式提交到文件demo.php中。如果服务器返回一个成功状态，那么用户将会看到“提交成功!欢迎下次再来!”的提示。
7.2.4 核心方法—ajaxForm()和ajaxSubmit()
正如上例的代码所示，通过核心方法ajaxForm()，能很容易地将表单升级为Ajax提交方式。
[插图]
Form插件还有一个核心方法ajaxSubmit()，也能完成同样的功能，代码如下：
[插图]
通过调用 ajaxSubmit()方法来响应用户的提交表单操作，从而使表单的提交方式由传统的提交方式转变为Ajax提交方式。
通过Form插件的这两个核心方法，都可以在不修改表单的HTML代码结构的情况下，轻易地将表单的提交方式升级为Ajax提交方式。
7.2.5 ajaxForm()方法和ajaxSubmit()方法的参数
ajaxForm()方法和ajaxSubmit()方法都能接受0个或者1个参数。当为单个的参数时，该参数既可以是一个回调函数，也可以是一个 options 对象。上面例子的参数就是回调函数。接下来介绍options对象，通过给ajaxForm()方法和ajaxSubmit()方法传递options对象，使得它们对表单拥有更多的控制权。
首先定义一个对象options，然后在对象里设置参数，代码如下：
[插图]
定义options对象之后，就可以把这个options对象传递给ajaxForm()方法，jQuery代码如下：
[插图]
或者传递给ajaxSubmit()方法，jQuery代码如下：
[插图]
在 options 对象里，指定了两个回调函数，即 beforeSubmit：showRequest和success: show Response，它们分别会在表单提交前和表单提交后被调用。
下面来看看这两个回调函数具体有哪些参数。
- beforeSubmit—提交前的回调函数
提交前的回调函数的代码如下：
[插图]
这个回调函数有3个参数。
第1个参数formdata是数组对象。在这里，使用$.param()方法把它转化为字符串，得到如下这种格式：
[插图]
需要注意的是，当表单提交时，Form插件会以Ajax方式自动提交这些数据。
第2个参数jqForm是一个jQuery对象，它封装了表单的元素。
如果需要访问jqForm的DOM元素，可以把jqForm转换为DOM对象。
[插图]
第3个参数options就是options对象。前面已经声明了options对象里的一些属性，其他没有声明的，则会使用默认的属性。
在这个回调函数中，只要不返回 false，表单都将被允许提交；如果返回 false，则会阻止表单提交。可以利用这个特性，在表单提交之前验证数据（后面将详细讲解），如果不符合验证规则，则阻止表单提交。
- success—提交后的回调函数
提交后的回调函数的代码如下：
[插图]
success有4个参数responseText，statusText，xhr和$form。其中responseText和statusText2个比较常用。
statusText只是一个返回状态，例如success、error等。
responseText 携带着服务器返回的数据内容。responseText 会根据设置的options 对象中的dataType属性来返回相应格式的内容。具体情况如下。
（1）对于缺省的HTML返回，回调函数的第1个参数是XMLHttpRequest对象的responseText属性。
（2）当 dataType 属性被设置为xml 时，回调函数的第1个参数是XMLHttpRequest 对象的responseXML属性。
例如声明服务器返回数据的类型为xml，然后以XML方式解析数据，代码如下：
[插图]
（3）当dataType属性被设置为json时，回调函数的第1个参数是从服务器返回的json数据对象。
例如声明服务器返回数据的类型为json，然后以json方式解析数据，代码如下：
[插图]
7.2.6 表单提交之前验证表单
大多数情况下，需要在表单提交前对表单元素的值进行一次验证，如果不符合验证规则，则阻止表单提交。
beforeSubmit会在表单提交前被调用。如果beforeSubmit返回false，则会阻止表单提交，利用这个特性，就可以轻松地完成验证表单元素的任务。
首先定义一个validate回调函数，把它设置为beforeSubmit的值。
[插图]
然后编写validate函数，它有3个参数：
[插图]
通过获取表单元素的值，对表单元素进行验证。Form 插件获取表单数据的方式有多种，下面讲解其中的3种方式。
- 方式1：利用参数formData
参数formData是一个数组对象，其中的每个对象都有名称和值。其数据格式如下：
[插图]
由于是数组，因此可以根据循环来获取每个元素的值，然后判断元素的值是否符合验证规则（这里只判断元素是否为空），如果有一项不符合验证规则，就返回false，来阻止表单提交。代码如下：
[插图]
[插图]
- 方式2：利用参数jqForm
不仅可以利用第1个参数formData来获取表单数据，而且可以用第2个参数jqForm来达到同样的效果。
参数jqForm是一个jQuery对象，它封装了表单的元素。如果需要访问jqForm的DOM元素，可以把jqForm转为DOM对象。
[插图]
然后通过form.name.value来获取用户名的值；通过form.address.value来获取地址的值。代码如下：
[插图]
- 方式3：利用fieldValue()方法
fieldValue()方法会把匹配元素的值插入到数组中，然后返回这个数组。如果表单元素的值被判定无效，则数组为空，否则数组将包含一个或多个元素的值。由于返回的是一个数组，而不是jQuery对象，因此不能进行链式操作。
利用 fieldValue()方法，也能很容易地获取到表单元素的值。例如可以通过$('input[name=address]').fieldValue()来获取name为“address”的<input>元素的值的数组集合，然后通过数组下标来获取数组中对应的值。
代码如下：
[插图]
通过以上几个例子可以清楚地知道，使用jQuery Form插件能够很容易地把一个传统的表单提交方式改变为Ajax提交方式，没有比这更简单的方法了。
7.2.7 API
Form 插件拥有很多方法，这些方法可以帮助用户很容易地管理表单数据和表单提交。读者可以参考附录F的API介绍。