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

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

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. SQL：安装多个实例，修改实例端口号,和IP加端口号连接实例

    sql server 安装第一个实例,默认实例的端口是1433, 一个库中如果有多个实例,从第二个实例开始的端口是动态端口,需要的话,自己手工指定为静态端口,如指定第二个实例为1434 或着随意一个如 ...

  2. Python入门3

    字典 字典四种创建方法: 1. dic = dict() print(dic) # 相当于 dic1 = {} print(dic1) # 输出 {} {} 2. dic = dict(one=1, ...

  3. IOS WebView修改contentInset 导致webview长按弹出菜单跳动的解决方法

    最近在项目中需要用到webview 加载H5 并且在webview 底部使用原生UI添加其他空间比如广告.或者评论(Scrollview) 最初使用修改webview中scrollview 的cont ...

  4. 扩展ValidationAttribute 1

    MVC中经常会用一些服务端对Model的验证. 服务端验证要继承自ValidationAttribute,并重写IsValid虚方法来自定义自己的验证规则. protected override Va ...

  5. sql ROW_NUMBER() 排序函数 (转)

    1使用row_number()函数进行编号:如 select email,customerID, ROW_NUMBER() over(order by psd) as rows from QT_Cus ...

  6. MVC图片验证码

    C#类库: public class YZM { public string YZMcode = String.Empty; public byte[] load() { Bitmap bit = , ...

  7. [DFNews] Elcomsoft 发布EPPB 2.00.233

    Elcomsoft Phone Password Breaker 是俄罗斯Elcomsoft公司推出的手机取证工具,能够针对黑莓.苹果等手机的备份文件进行多种方式破解,支持远程获取iCloud数据. ...

  8. IIS6批量添加主机头，修改IIS数据库

    首先,找到IIS的数据库.默认是在C:\WINDOWS\system32\inetsrv 下的MetaBase.xml文件. 如果找不到,请右键右键站点->所有服务->将配置保存到一个文件 ...

  9. XF 文档 - Element Framework Doc

    配置篇 Chapter Configuration Schema篇 Chapter Schema 查询篇 Chapter Querying Data 数据更改及验证篇 Chapter Data Mod ...

  10. WebStorm注册码

    WebStorm注册码User Name:EMBRACE License Key:===== LICENSE BEGIN =====24718-1204201000001h6wzKLpfo3gmjJ8 ...