表单提交ajax实现

时间:2022-03-04 19:24:31

提交表单常见的几种方式这里总结一下,最平常的直接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() {
}
});