使用jquery.form.js提交表单上传文件

时间:2022-11-22 14:23:40

方法:

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;
})
}