方法:
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();
}
|
自己做的demo:
<form action="" method="POST" name='formUpdate'enctype="multipart/form-data" role="form" id="addActivity" >
<input type="submit" class="btn btn-info create-activity" value="保存">
</form>
$(".create-activity").on("click",function(){
$("#addActivity").submit(function(){
$(this).ajaxSubmit({
url:"/activity/operate",
success:function(data){
alert(data['msg'])
window.location.href="...."
return false;
},
resetForm:true,
dataType:'json'
})
return false;
})
}