ajax提交form表單方法

AJAX提交form表單方法

　AJAX提交form表單，這在日常項目中是經(jīng)常用到的。前臺無論是簡單的html、jsp或者使用了easyui框架，只要是提交表單一般都會使用到AJAX。

AJAX提交表單分為兩種

　1、無返回結(jié)果的，就是把表單數(shù)據(jù)直接提交給后臺，讓后臺直接處理；

　最簡單的就是$(“#formid”).submit();直接將form表單提交到后臺。

　2、返回有結(jié)果的，這種情況下，后臺不管是執(zhí)行成功還是失敗，最終的信息都需要返回到前臺。

　第二種是使用最多的一種，因為程序的執(zhí)行成功與否都需要給用戶提示，程序一般也都是多步完成的，執(zhí)行完插入操作，需要發(fā)起流程，這就需要在界面上判斷成功與否。ajax本身屬于有返回結(jié)果的一類，其中的success方法就是處理后臺返回結(jié)果的。

AJAX提交表單有返回結(jié)果的有兩種實現(xiàn)方式

　1、將form表單數(shù)據(jù)序列化

<span style="font-size:18px;">  $.ajax({  
    type: "POST",  
    url:your-url,  
    data:$('#yourformid').serialize(),  
    async: false,  
    error: function(request) {  
        alert("Connection error");  
    },  
    success: function(data) {  
        //接收后臺返回的結(jié)果  
    }  
  });</span>  

　需要注意的是，使用這種方法的前提是form表單中的項一定要有name屬性，后臺獲取的鍵值對為 key=name 值，value=各項值。

注意：無論是input標(biāo)簽還是span標(biāo)簽或者其他標(biāo)簽，一定要有name屬性，沒有name屬性后臺是獲取不到該項的。

2、通過窗口查找form提交

<span style="font-size:18px;">  // 提交表單  
  var obj = document.getElementById("xx_iframe").contentWindow;  
  obj.$("#yourform").form("submit",{  
    success :function(data){  
        //對結(jié)果處理  
    }    
  });</span>

　因為在當(dāng)前界面上彈出對話框，然后在對話框上的按鈕觸發(fā)對話框中表單提交，對話框又是鏈接的另外的html頁面，如此通過$(“#formid”)的方式是找不到對話框中的form的，因此這種情況下只能使用這種方式提交表單。

　另外ajax中封裝的get,post請求也都屬于有返回結(jié)果的一類。

　總的來說，無返回結(jié)果的和有返回結(jié)果的(將form表單數(shù)據(jù)序列化+通過窗口實現(xiàn)form提交)，form表單都必須要有name屬性。