- 相關(guān)推薦
JAVA基礎(chǔ)知識(shí)：簡(jiǎn)單介紹form的提交方式
一：form簡(jiǎn)介
Easyui中的form有兩種提交方式、結(jié)合自己新添加的一種ajax提交方式、本文簡(jiǎn)單說(shuō)明form的三種提交方式、和結(jié)合validatebox使用來(lái)校驗(yàn)基本信息。
二：form提交
以登錄為例：下面是登錄頁(yè)面、注意要導(dǎo)入easyui所需要的css和js。
要引入的css+js：
登錄的div和表單：
username: password:
簡(jiǎn)單說(shuō)明：
1、登錄是使用dialog來(lái)作為界面的、初始化dialog有幾種方式——(1)使用class="easyui-dialog"定義、使用 data-options="xxx"來(lái)定義dialog屬性、這種適合只具有基本樣式、不具有與后臺(tái)交互功能的時(shí)候的頁(yè)面使用。(2)使用js初始化、適合與后臺(tái)交互的界面使用、(3)可以混合使用。
1、通過(guò)ajax提交：
loginAndregist = $('#loginAndregist').dialog({
closable:false,
modal:true,
draggable:false,
buttons:[{
text:'注冊(cè)',
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('標(biāo)題','用戶名密碼錯(cuò)誤');
}
}
});
}
}
}],
});
簡(jiǎn)單說(shuō)明：if( $('#loginInputForm').form('validate')){...}是將form與其內(nèi)部的validatebox綁定、可以使用 validatebox提供的校驗(yàn)規(guī)則來(lái)校驗(yàn)輸入。若不使用這個(gè)而直接使用ajax提交、則不會(huì)使用validatebox提供的校驗(yàn)規(guī)則、當(dāng)然也可以自己加校驗(yàn)方式、onSubmit()。
2、通過(guò)先初始化form、再在點(diǎn)擊登錄觸發(fā)函數(shù)中提交
初始化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('標(biāo)題','用戶名密碼錯(cuò)誤');
}
}
});
點(diǎn)擊登錄時(shí)提交表單：
loginAndregist = $('#loginAndregist').dialog({
closable:false,
modal:true,
draggable:false,
buttons:[{
text:'注冊(cè)',
handler:function(){
$('#regist').dialog('open');
}
},{
text:'登錄',
handler:function(){
loginInputForm.submit();
}
}],
});
簡(jiǎn)單說(shuō)明：這里不再需要像ajax一樣添加一個(gè)校驗(yàn)的if、因?yàn)檫@種方式的form是與validatebox綁定的、會(huì)自動(dòng)校驗(yàn)。
3、直接在點(diǎn)擊登錄觸發(fā)函數(shù)中提交
loginAndregist = $('#loginAndregist').dialog({
closable:false,
modal:true,
draggable:false,
buttons:[{
text:'注冊(cè)',
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('標(biāo)題','用戶名密碼錯(cuò)誤');
}
}
});
}
}
}],
});
$('#loginInputForm').form('submit',{...})、當(dāng)點(diǎn)擊登錄按鈕時(shí)會(huì)直接提交表單、紅色部分可以對(duì)表單提交之前做一些操作、比如校驗(yàn)。
【JAVA基礎(chǔ)知識(shí)：簡(jiǎn)單介紹form的提交方式】相關(guān)文章：
Java的基礎(chǔ)知識(shí)07-27
Java基礎(chǔ)知識(shí)詳解12-07
JAVA認(rèn)證基礎(chǔ)知識(shí)：JavaNativeInterface學(xué)習(xí)小結(jié)06-02
JAVA認(rèn)證基礎(chǔ)知識(shí)：基于反射機(jī)制的服務(wù)代理調(diào)用08-26
古箏基礎(chǔ)知識(shí)介紹03-26
影視表演基礎(chǔ)知識(shí)介紹01-03
印度舞基礎(chǔ)知識(shí)介紹11-30
素描工具基礎(chǔ)知識(shí)介紹06-20
美國(guó)留學(xué)省錢方式介紹06-08