JAVA基础知识：简单介绍form的提交方式
一：form简介
Easyui中的form有两种提交方式、结合自己新添加的一种ajax提交方式、本文简单说明form的三种提交方式、和结合validatebox使用来校验基本信息。
二：form提交
以登录为例：下面是登录页面、注意要导入easyui所需要的`css和js。
要引入的css+js：
登录的div和表单：
username: password:
简单说明：
1、登录是使用dialog来作为界面的、初始化dialog有几种方式——(1)使用class="easyui-dialog"定义、使用 data-options="xxx"来定义dialog属性、这种适合只具有基本样式、不具有与后台交互功能的时候的页面使用。(2)使用js初始化、适合与后台交互的界面使用、(3)可以混合使用。
1、通过ajax提交：
loginAndregist = $('#loginAndregist').dialog({
closable:false,
modal:true,
draggable:false,
buttons:[{
text:'注册',
handler:function(){
$('#regist').dialog('open');
}
},{
text:'登录',
handler:function(){
if( $('#loginInputForm').form('validate')){
$.ajax({
url:'login_login.action',
data:$('#loginInputForm').serialize(),
cache:false,
dataType:'text',
success:function(r){
console.info(r);
if(r == "success"){
$('#loginAndregist').dialog('close');
$.messager.show({
title : '提示',
msg : '登录成功'
});
}else{
$.messager.alert('标题','用户名密码错误');
}
}
});
}
}
}],
});
简单说明：if( $('#loginInputForm').form('validate')){...}是将form与其内部的validatebox绑定、可以使用 validatebox提供的校验规则来校验输入。若不使用这个而直接使用ajax提交、则不会使用validatebox提供的校验规则、当然也可以自己加校验方式、onSubmit()。
2、通过先初始化form、再在点击登录触发函数中提交
初始化form表单：
//初始化登录表单
loginInputForm = $('#loginInputForm').form({
url:'login_login.action',
success:function(r){
console.info(r);
if(r == "success"){
$('#loginAndregist').dialog('close');
$.messager.show({
title : '提示',
msg : '登录成功'
});
}else{
$.messager.alert('标题','用户名密码错误');
}
}
});
点击登录时提交表单：
loginAndregist = $('#loginAndregist').dialog({
closable:false,
modal:true,
draggable:false,
buttons:[{
text:'注册',
handler:function(){
$('#regist').dialog('open');
}
},{
text:'登录',
handler:function(){
loginInputForm.submit();
}
}],
});
简单说明：这里不再需要像ajax一样添加一个校验的if、因为这种方式的form是与validatebox绑定的、会自动校验。
3、直接在点击登录触发函数中提交
loginAndregist = $('#loginAndregist').dialog({
closable:false,
modal:true,
draggable:false,
buttons:[{
text:'注册',
handler:function(){
$('#regist').dialog('open');
}
},{
text:'登录',
handler:function(){
if( $('#loginInputForm').form('validate')){
$('#loginInputForm').form('submit',{
url:'login_login.action',
onSubmit: function(){
console.info('do some check !');
},
success : function(r){
console.info(r);
console.info(r);
if(r == "success"){
$('#loginAndregist').dialog('close');
$.messager.show({
title : '提示',
msg : '登录成功'
});
}else{
$.messager.alert('标题','用户名密码错误');
}
}
});
}
}
}],
});
$('#loginInputForm').form('submit',{...})、当点击登录按钮时会直接提交表单、红色部分可以对表单提交之前做一些操作、比如校验。