一、表单按钮的提交前代表对提交内容的验证

二、表单按钮的提交后代表对把数据提交给后台

1. 界面层页面编辑代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<!-- 1 JQuery的js包 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

<!-- 2 css资源 -->

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">

<!-- 3 图标资源 -->

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">

<!-- 4 easyui的js包 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<!-- 5 本地语言  -->

<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

</head>

<body>

<script type="text/javascript">

$(function()

    {

        // 提交按钮

        $('#lb1').click(function()

        {

            $('#form1').form('submit',{

                url:'saveUserServlet',

                // 提交前验证

                onSubmit:function()

                {

                    // 检查组件验证是否通过

                    var isValid = $(this).form('validate');

                    if (!isValid){

                        $.messager.show({

                            title:'消息',

                            msg:'数据验证未通过'

                        })

                    }

                    return isValid;    // 返回false终止表单提交

                },

                // 提交后

                success:function(data)

                {

                //    alert('返回结果='+data);

                    // 通过js方式解析JSON字符串

                    var msg = eval("("+ data +")");

                    if(msg.success)

                    {

                        alert(msg.message);

                    }

                }

            });

        });

    })

</script>

添加员工信息的页面

<br><br>

<form id="form1" action="" method="post">

用户名：<input class="easyui-textbox" style="width:200px"

data-options="{

required:true,validType:'length[2,10]',prompt:'请输入关键字',missingMessage:'请输入用户名'

}">

<br><br>

密码：<input class="easyui-textbox" style="width:200px"

data-options="{type:'password',

required:true,

validType:'length[6,10]'}">

<br><br>

年龄：<input class="easyui-numberbox" style="width:200px"

 data-options="{min:18,max:99}">

 <br><br>

 <a id="lb1" class="easyui-linkbutton" href="#" style="width:80px">提交</a>

</form>

</body>

</html>

2.Servlet层代码：

package com.hanqi.controller;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class saveUserServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public saveUserServlet() {

        super();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            response.setCharacterEncoding("UTF-8");

            request.setCharacterEncoding("UTF-8");

            response.setContentType("text/html");

            // 处理请求

            String rtn="{'success':true,'message':'保存成功！'}";

            response.getWriter().write(rtn);

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doGet(request, response);

    }

}

Easyui表单之按钮的提交的更多相关文章

  1. form表单取消按钮自动提交

    默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class=& ...

  2. easyui表单提交，后台获取不到值

    J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...

  3. 雷林鹏分享：jQuery EasyUI 表单 - 创建异步提交表单

    jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...

  4. easyUI表单基础知识

    easyUI创建异步提交表单 我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...

  5. 雷林鹏分享：jQuery EasyUI 表单 - 表单验证

    jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...

  6. easyui表单插件-包括日期时控件-列表

    ← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器  jQuery EasyUI 插件 ...

  7. 表单input按钮在各浏览器之间的兼容性

    从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { backgrou ...

  8. JQuery EasyUI 表单

    EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...

  9. 雷林鹏分享：jQuery EasyUI 表单 - 创建树形下拉框

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

随机推荐

  1. AngularJS---表达式

    AngularJS的表达式是放在{{}}里面,用{{ }}符号将一个变量绑定到$scope上. angularJS中的表达式有如下特点: 1.只能在其所属作用域内部 所有的表达式都在其所属的作用域内部 ...

  2. 解决Excel 2010只有一个窗口的问题

    Excel 2010打开多个文件,但只有一个窗口的问题. 一般首次安装没有这个问题,碰到装了WPS后再卸载WPS,还有就是OFFICE卸载后重装,也会发生这个现像. 一.: 删除 HKEY_CLASS ...

  3. delphi怎么创建一个文本文件

    //创建一个文本文件 procedure TFrmAutomatismBalance.FlatButton3Click(Sender: TObject); var TF:TextFile;  Path ...

  4. 一. DotNet MVC4.0+EasyUI Web简单框架-前言

    之所以说它简单,是因为仅仅用了大家最熟悉的三层架构,简单明了 1.先新建一个MVC4.0 Web项目 2.添加EasyUI的引用,放到Script底下 http://files.cnblogs.com ...

  5. 获得、修改 SQL Server表字段说明

    SELECT ( then d.name else '' end) 表名, a.colorder 字段序号, a.name 字段名, g.[value] AS 字段说明 FROM syscolumns ...

  6. Async Programming - 1 async-await 糖的本质（2）

    上一篇讲了这么多,其实说的就是一个事,return会被编译器重写成SetResult,所以如果我们的异步函数返回的是一个Task<int>,代码就要改成这样: using System; ...

  7. #include <objsafe.h>//OCX控件在IE8浏览器下不能使用问题

    一.OCX控件开发常见的问题 1.OCX控件在IE8浏览器下不能使用问题 原因:IE8会拦截OCX控件的方法. 解决方法:在OCX控件开发时加入安全接口. (1)在有"Crtl"字 ...

  8. 【HOW】SharePoint如何彻底删除用户

    在网站中打开“人员和组”,在选中某一用户后,一般只有“从用户组中删除用户”操作.此操作只能将此用户从此用户组中删除,却不能从网站集中彻底删除. 要将用户从网站集中彻底删除,可按如下步骤操作: 1. 在 ...

  9. 用svg制作loading动画

    首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...

  10. python1day

    下载地址 https://www.python.org/downloads/ 一 配置环境变量 右键计算机--属性--高级系统设置-高级-环境变量-系统变量--Administratorpath编辑- ...