Uploading a file using the Jquery.form.js submission form

Method:

1.formSerilize () is used to serialize the data in the form and automatically organize it into a URL address format that is appropriate for Ajax asynchronous Requests.

2.clearForm () Clears the contents of all the input values in the Form.

3.restForm resets all field contents in the Form. Returns the fields from all forms to the default value when the page loads.

Question: the difference between Ajaxform () and Ajaxsubmit ():

Answer: $ ("#form1"). Ajaxform (); The equivalent of two lines:

1234	$("#form1".submit)(function(){ $("#form1").ajaxSubmit();returnfalse;})

This means that Ajaxfrom () automatically blocks form Submission. and Ajaxsubmit () does not automatically prevent form submission, want to prevent form submission, to return false;

Tip 1: If you want the form to commit without jumping, a simple line of code can be implemented, almost the same as not using a form submission:

123	$("#MailForm").ajaxSubmit(function(message) {  alert("表单提交已成功!");});

Note : Both Ajaxform () and Ajaxform () can have no parameters or accept 1 Parameters. The parameter can be either a callback function or an options object. The object is very powerful, as explained Below:

?

1234567891011

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 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。}

Example:

Page JS Code:

?

12345678910111213141516

<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>

Page HTML code:

?

12345678910

<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>

Backstage: IndexAjax.aspx.cs Code

123456789

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

Self-made 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= "save" >

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

}

Uploading a file using the Jquery.form.js submission form