提交表單常見的幾種方式這裏總結一下,最平常的直接submit按鈕提交就不說了。
一、不使用submit按鈕的submit提交
這個標題看起來有些彆扭,但實際中確實有這樣的需求,我們要在提交表單時進行驗證,驗證通過才提交,否則不提交。可以用下面代碼實現:
這是比較基礎的一種實現方法。注意這時就不需要再form標籤 上加action屬性,地址填在這裏的url就好。onSubmit是在表單提交的同時執行的方法,$(this).form(“validate”)用的是easyui的表單驗證,驗證失敗則不提交。
$("#fm").form("submit",{
url:url,
onSubmit:function(){
return $(this).form("validate");
},
success:function(result){
var result=eval('('+result+')');
if(result.status=="success"){
$.messager.alert("系統提示","保存成功!");
resetValue();
$("#dlg").dialog("close");
$("#dg").datagrid("reload");
}else{
$.messager.alert("系統提示","保存失敗!名稱或編號已存在");
return;
}
}
});
二、普通ajax提交
這也是很常見的寫法,不過表單在這裏就失去意義了。
當然可以使用$(“form”).serialize()直接序列化表單內容放在data裏面,就不用這樣一個個添加。
$.ajax({
url:"../add_stu.do",
type:"post",
dataType:"json",
data:{
id:id,
name:name,
birth:birth,
sex:sex,
tel:tel,
email:email,
address:address,
classid:classid
},
success:function(data){
if(data.status == "success"){
$('#add_dlg').dialog('close');
$.messager.show({
title : '提示',
msg : '添加成功'
});
$('#dg').datagrid('load', {});
}else{
$.messager.show({
title : '提示',
msg : '添加失敗,請聯繫管理員 ------'
});
}
},
error:function(){
$.messager.show({
title : '提示',
msg : '系統錯誤,請聯繫管理員------'
});
}
});
三、使用jquery.form.js進行表單提交
上面的使用$選擇器和ajax的毫無疑問要引入jquery.min.js,但使用這種方法還要引入一個jquery.form.js
這種方式算是正宗的表單ajax提交
var form = $("#addcompany");
form.ajaxSubmit({
type : "post",
url : "${ctx}/company/addCompany.do",
data : $.param({
dealType : dealType
}),
dataType : "json",
success : function(data) {
if (data == "exist") {
$.messager.alert("系統提示","公司名稱已存在,請重新輸入!");
} else {
$.messager.alert("系統提示","公司添加成功");
initCompany();
$("#company_info").dialog("close");
}
},
error : function() {
}
});