ajax提交form表單方法

AJAX提交form表單方法

　AJAX提交form表單，這在日常項(xiàng)目中是經(jīng)常用到的。前臺(tái)無(wú)論是簡(jiǎn)單的html、jsp或者使用了easyui框架，只要是提交表單一般都會(huì)使用到AJAX。

AJAX提交表單分為兩種

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

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

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

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

AJAX提交表單有返回結(jié)果的有兩種實(shí)現(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) {  
        //接收后臺(tái)返回的結(jié)果  
    }  
  });</span>  

　需要注意的是，使用這種方法的前提是form表單中的項(xiàng)一定要有name屬性，后臺(tái)獲取的鍵值對(duì)為 key=name 值，value=各項(xiàng)值。

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

2、通過窗口查找form提交

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

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

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

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