1、Form 插件简介
jQuery Form 插件是一个优秀的 Ajax 表单插件，可以非常容易地、无侵入地升级 HTML 表单以支持 Ajax。
jQuery Form 有两个核心方法 --- ajaxForm( ) 和 ajaxSubmit( )，它们集合了从控制表单元素到决定如何管理提交进程的功能。另外，插件还包括其它的一些方法：formToArray( ), formSerialize( ), fieldSerialize( ), clearForm( ), clearFields( )和 resetForm( )等。
2、插件下载地址：
http://malsup.com/jquery/form/
里面提供了插件下载，API 和实例代码讲解，都是英文的
3、快速上手
HTML代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
link
href
=
"//cdn.bootcss.com/bootstrap/2.0.4/css/bootstrap.css"
rel
=
"stylesheet"
>
</
head
>
<
body
>
<
form
role
=
"form"
id
=
"myForm"
action
=
"demo.php"
method
=
"post"
>
<
div
class
=
"form-group"
>
<
label
for
=
"uName"
>姓名：</
label
>
<
input
type
=
"text"
name
=
"uName"
id
=
"uName"
>
</
div
>
<
div
class
=
"form-group"
>
性别：
<
label
class
=
"radio inline"
>
<
input
type
=
"radio"
name
=
"gender"
id
=
"male"
value
=
"male"
>男
</
label
>
<
label
class
=
"radio inline"
>
<
input
type
=
"radio"
name
=
"gender"
id
=
"female"
value
=
"female"
>女
</
label
>
</
div
>
<
div
class
=
"form-group"
>
<
label
for
=
"age"
>年龄：</
label
>
<
input
type
=
"text"
name
=
"age"
id
=
"age"
>
</
div
>
<
button
type
=
"submit"
class
=
"btn btn-success"
>提交</
button
>
<
div
id
=
"output"
style
=
"display:none"
></
div
>
</
form
>
<
script
src
=
"resources/js/jquery-1.8.3.min.js"
></
script
>
<
script
src
=
"resources/js/jquery.form.js"
></
script
>
<
script
>
$('#myForm').ajaxForm(function(){
$('#output').html('提交成功！欢迎下次再来！').show();
})
</
script
>
</
body
>
</
html
>
|
页面截图：
当表单被提交时，“姓名”、“性别”和“年龄”的值会以无刷新的方式提交到 demo.php文件中。如果服务器返回一个成功的状态，那么，用户将看到“提交成功！欢迎下次再来！”的提示。
4、核心方法 --- ajaxForm( ) 和 ajaxSubmit( )
如上例所示，通过核心方法 ajaxForm( )，能很容易地将表单升级为 Ajax 提交方式
|
1
2
3
|
$(
'#myForm'
).ajaxForm(
function
(){
$(
'#output'
).html(
'提交成功！欢迎下次再来！'
).show();
})
|
Form 插件还有一个核心方法 ajaxSubmit( )，也能完成同样的功能，代码如下：
|
1
2
3
4
5
6
|
$(
'#myForm'
).submit(
function
(){
$(
this
).ajaxSubmit(
function
(){
$(
'#output'
).html(
'提交成功！欢迎下次再来！'
).show();
});
return
false
;
//阻止表单默认提交
})
|
通过调用 ajaxSubmit( ) 方法来响应用户的提交表单操作，从而使表单的提交方式由传统的提交方式转变为 Ajax 提交方式。
区别：
ajaxForm( ) 不能提交表单，在document的ready方法中，使用ajaxForm( )为 Ajax 提交表单进行准备，必须由submit 提交；
ajaxSubmit( ) 通过 Ajax 立即提交表单，在大多数情况下，点击提交按钮以后都是通过这个方法来提交表单
ajaxForm( ) 和 ajaxSubmit( )方法都能接受 0个 或者 1个参数，如果是单个的参数，该参数既可以是一个回调函数，也可以是一个 options 对象。前面的例子中，使用的就是回调函数，现在来了解下options对象，显然，这样可以对表单拥有更多的控制权。
首先定义一个对象 options，然后在对象里面设置参数，代码示例如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
var
options={
target:
'#output'
,
//把服务器返回的内容放到id为output的元素中
beforeSubmit:showRequest,
//提交前的回调函数
success: showResponse,
//提交后的回调函数
//url: url, //默认是form的action，如果声明，则会被覆盖
//type: type, //默认是form的method（get 或 post），如果声明，则会被覆盖
//dataType: null, //'xml', 'script', 'json （接受服务端返回的类型）'
//clearForm: true, //成功提交后，清除所有表单元素的值
//resetForm: true, //成功提交后，重置所有表单元素的值
//timeout:3000 //限制请求的时间，当请求大于3s，跳出请求
}
|
这里还有一张更详细的列表：
| 属性 | 描述 |
| url | Ajax请求将要提交到该url，默认是表单的action属性值 |
| type | 指定提交表单数据的方法（method）：“GET”或“POST”。 默认值：表单的method属性值（如果没有找到默认为“GET”）。 |
| dataType | 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持： ‘xml’：如果dataType == ‘xml’，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。 ‘json’：如果dataType == ‘json’， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。。 ‘script’：如果dataType == ‘script’， 服务器响应将求值成纯文本。。 默认值：null（服务器返回responseText值） |
| target | 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。 默认值：null。 |
| beforeSubmit | 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。 如果“beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。 默认值：null |
| success | 表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。 默认值：null |
| clearForm | 表示如果表单提交成功是否清除表单数据。默认值：null |
| resetForm | 表示如果表单提交成功是否进行重置。默认值: null |
下面看看 beforeSubmit 和 success 两个回调函数：
beforeSubmit --- 提交前的回调函数
提交前的回调函数的代码如下：
|
1
2
3
4
|
function
showRequest(formData, jqForm, options){
var
queryString = $.param(formData);
return
true
;
}
|
这个回调函数有3个参数
> formData 是数组对象。在这里，使用 $.param( ) 方法把它转化为字符串，得到如下格式：
|
1
|
name=1&address=2
|
需要注意的是，当表单提交时，Form插件会以 Ajax方式自动提交这些数据
> jqForm 是一个jQuery 对象，它封装了表单的元素
如果需要访问 jqForm 的DOM元素，可以把 jqForm 转化为 DOM元素
|
1
2
|
var
formElement = jqForm[0];
var
address = formElement.address.value;
|
> options 就是options对象，前面已经声明了一些 options对象里的一些属性，其它没有声明的，则会使用默认的属性。
在这个回调函数中，只要不返回 false，表单都将被允许提交；如果返回 false，则会阻止表单提交。可以利用这个特性，在表单提交之前验证数据，如果不符合验证规则，则阻止表单提交
success --- 提交后的回调函数
提交后的回调函数代码如下：
|
1
2
3
|
function
showResponse(responseText, statusText){
alert(
'状态：'
+statusText+
'\n 返回的内容是：\n'
+responseText);
}
|
statusText 只是一个返回状态，例如 success、error等
参数responseText 携带着服务器返回的数据内容。responseText 会根据设置的 options 对象中的 dataType 属性来返回相应格式的内容，具体情况如下：
（1）、对于缺省的 HTML 返回，回调函数的第一个参数是 XMLHttpRequest 对象的 responseText 属性
（2）、当 dataType 属性被设置为 xml 时，回调函数的第一个参数是 XMLHttpRequest 对象的 responseXML属性
例如声明服务器返回数据的类型为 xml，然后以 xml 方式解析数据，代码如下：
|
1
2
3
4
5
6
7
8
9
|
$(
'#xmlForm'
).ajaxForm({
dataType:
'xml'
,
success: processXml
});
function
processXml(responseXML){
var
name = $(
'name'
,responseXML).text();
var
address = $(
'address'
,responseXML).text();
$(
'#xmlOut'
).html(name+
" "
+address);
}
|
（3）、当 dataType 属性被设置为 json 时，回调函数的第一个参数是从服务器返回的 json 对象
例如声明服务器返回数据的类型为 json，然后以 json 方式解析数据，代码如下：
|
1
2
3
4
5
6
7
|
$(
'#jsonForm'
).ajaxForm({
dataType:
'json'
,
success:processJson
})
function
processJson(data){
$(
'#jsonOut'
).html(data.name+
" "
+data.address);
}
|
5、表单提交之前验证表单
首先定义一个 validate 回调函数，把它设置为 beforeSubmit 的值
|
1
|
beforeSubmit：validate
|
然后编写 validate 函数，它有 3 个参数
|
1
2
3
4
5
6
7
8
|
function
validate(formData,jqForm,options){
/*
* 在这里需要对表单元素进行验证，如果不符合规则，
* 将返回 false 来阻止表单提交，直至符合规则为止
* */
var
queryString = $.param(formData);
//组装数据
return
true
;
}
|
通过获取表单元素的值，对表单元素进行验证。Form插件获取表单数据的方式有多种，下面介绍其中的3种方式。
方式1：利用参数 formData
参数 formData 是一个数组对象，其中的每个对象都有名称和值，其数据格式如下：
|
1
2
3
4
|
[
{name:name, value:nameValue},
{name:password,value:passwordValue}
]
|
由于是数组，因此可以根据循环来获取每个元素的值，然后判断元素的值是否符合验证规则（这里只判断元素是否为空），如果有一项不符合验证规则，就返回 false，来阻止表单提交
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(
function
(){
var
options = {
beforeSubmit: validate,
resetForm:
true
,
dataType:
'json'
};
$(
'#myForm'
).submit(
function
(){
$(
this
).ajaxSubmit(options);
})
});
function
validate(formData,jqForm,options){
for
(
var
i=0; i<formData.length; i++){
if
(!formData[i].value){
alert(
'姓名，性别和年龄都不能为空'
);
return
false
;
}
}
var
queryString = $.param(formData);
return
true
;
}
|
方式2：利用参数 jqForm
参数 jqForm 是一个jQuery 对象，它封装了表单的元素。可以先转成 DOM对象，再来判断
|
1
2
3
4
5
6
7
8
9
|
function validate(formData, jqForm, options){
var form = jqForm[0];
if
(!form.uName.value || !form.gender.value || !form.age.value){
alert(
'姓名，性别和年龄都不能为空'
);
return
false;
}
var queryString = $.param(formData);
return
true;
}
|
方式3：利用 fieldValue( )方法
fieldValue 方法会把匹配元素的值插入到数组中，然后返回这个数组。如果表单元素的值被判定无效，则数组为空，否则数组将包含一个或多个元素的值。由于返回的是一个数组，而不是 jQuery 对象，因此不能进行链式操作
利用 fieldValue 方法，也能很容易地获取到表单元素的值。例如，可以通过 $('input[name="address"]').fieldValue() 来获取 name 为“address”的<input>元素的值的数组集合，然后通过数组下标来获取数组中对应的值。
|
1
2
3
4
5
6
7
8
9
10
11
|
function
validate(formData, jqForm, options){
var
uNameValue = $(
'input[name=uName]'
).fieldValue();
var
genderValue = $(
'input[name=gender]'
).fieldValue();
var
ageValue = $(
'input[name=age]'
).fieldValue();
if
(!uNameValue[0] || !genderValue[0] || !ageValue[0]){
alert(
'姓名，性别和年龄都不能为空'
);
return
false
;
}
var
queryString = $.param(formData);
return
true
;
}
|
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1877825
