JAVA认证 百分网手机站

JAVA基础知识:简单介绍form的提交方式

时间:2017-11-18 15:48:26 JAVA认证 我要投稿

JAVA基础知识:简单介绍form的提交方式

  一:form简介

JAVA基础知识:简单介绍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',{...})、当点击登录按钮时会直接提交表单、红色部分可以对表单提交之前做一些操作、比如校验。