原文链接:http://www.jb51.net/article/77439.htm
本文实例讲述了jQuery插件之jQuery.Form.js用法。分享给大家供大家参考,具体如下:
一、jQuery.Form.js 插件的作用是实现Ajax提交表单。
方法:
1.formSerilize() 用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式。
2.clearForm() 清除表单中所有输入值的内容。
3.restForm 重置表单中所有的字段内容。即将所有表单中的字段恢复到页面加载时的默认值。
疑问:ajaxForm()与ajaxSubmit()的区别:
答案:$("#form1").ajaxForm(); 相当于以下两行:
1
2
3
4
|
$(
"#form1"
.submit)(
function
(){
$(
"#form1"
).ajaxSubmit();
return
false
;
})
|
也就是说ajaxFrom()会自动阻止表单提交。而ajaxSubmit()不会自动阻止表单提交,想阻止表单提交,要自己return false;
技巧1:如果希望表单提交完成后不跳转,那么一行简单的代码就能够实现,几乎与不使用表单提交是一样的:
1
2
3
|
$(
"#MailForm"
).ajaxSubmit(
function
(message) {
alert(
"表单提交已成功!"
);
});
|
注意:ajaxForm()与ajaxForm()都可以没有参数或者接受1个参数。该参数既可以是一个回调函数,也可以是一个options对象。该对象功能非常强大,说明如下:
1
2
3
4
5
6
7
8
9
10
11
|
var
options={
url:url,
//form提交数据的地址
type:type,
//form提交的方式(method:post/get)
target:target,
//服务器返回的响应数据显示在元素(Id)号确定
beforeSubmit:
function
(),
//提交前执行的回调函数
success:
function
(),
//提交成功后执行的回调函数
dataType:
null
,
//服务器返回数据类型
clearForm:
true
,
//提交成功后是否清空表单中的字段值
restForm:
true
,
//提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态
timeout:6000
//设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。
}
|
例子:
页面js代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script src=
"jQuery.1.8.3.js"
type=
"text/javascript"
></script>
<script src=
"jQuery.Form.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
$(
function
() {
$(
":submit"
).click(
function
() {
var
options = {
url:
"indexAjax.aspx"
,
target:
"#div2"
,
success:
function
() {
alert(
"ajax请求成功"
);
}
};
$(
"#form1"
).ajaxForm(options);
})
})
</script>
|
页面HTML代码:
1
2
3
4
5
6
7
8
9
10
|
<
div
id
=
"div1"
>
<
form
id
=
"form1"
method
=
"get"
action
=
"#"
>
<
p
>我的名字:<
input
type
=
"text"
name
=
"name"
value
=
"请输入内容"
/></
p
>
<
p
>我的偶像是:<
input
type
=
"radio"
name
=
"Idol"
value
=
"刘德华"
/>刘德华 <
input
type
=
"radio"
name
=
"Idol"
value
=
"张学友"
/>张学友</
p
>
<
p
>我喜欢的音乐类型:<
input
type
=
"checkbox"
name
=
"musictype"
value
=
"1.摇滚"
>摇滚 <
input
type
=
"checkbox"
name
=
"musictype"
value
=
"2.轻松"
>轻柔 <
input
type
=
"checkbox"
name
=
"musictype"
value
=
"3.爵士"
>爵士</
p
>
<
p
><
input
type
=
"submit"
value
=
"确认"
/></
p
>
</
form
>
</
div
>
<
div
id
=
"div2"
>
</
div
>
|
后台:indexAjax.aspx.cs代码
1
2
3
4
5
6
7
8
9
|
protected
void
Page_Load(
object
sender, EventArgs e)
{
string
strName = Request[
"name"
];
string
strIdol = Request[
"Idol"
];
string
strMusicType = Request[
"musictype"
];
Response.Clear();
Response.Write(
"我的名字是:"
+ strName +
"; 我的偶像是:"
+ strIdol +
"; 我喜欢的音乐类型:"
+ strMusicType);
Response.End();
}
|
示例代码点击此处本站下载。
关于更多jQuery插件用法还可参阅本站相关专题:《jQuery常用插件及用法总结》。