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

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

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. 优化Select 语句的原则

    优化Select 语句的原则 -摘抄<SQL Server 2005 性能监测与优化> Select 语句是数据库应用系统中最常用的语句之一,Select 语句设计的好坏直接影响到应用程序 ...

  2. linux eclipse c++

    几年前使用过eclipse c++,最近两年没有怎么使用.其中细节,忘的差不多了.最近费很大劲,总算找了回来.真是好记性,不如烂笔头啊! 现在将使用过程中的一些细节,总结如下: 1.安装eclipse ...

  3. C# 使用ffmpeg.exe进行音频转换完整demo-asp.net转换代码

    C# 使用ffmpeg.exe进行音频转换完整demo-asp.net转换代码 上一篇说了在winform下进行调用cmd.exe执行ffmpeg.exe进行音频转换完整demo.后来我又需要移植这个 ...

  4. Visual studio 类视图和资源视图不显示的问题

    关于Visual studio 类视图和资源视图不显示的问题 解决方法: 1. 工具—选项—文本编辑器—C/C++—高级,浏览/导航下的禁用数据库选项置为False; 2. 输入命令:devenv / ...

  5. json 与jsonp 特点及区别

    简单描述JSON跟JSONP的区别以及实战 什么是JSON? 前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点. JSON的优点 ...

  6. Ubuntu开启22端口

    [http://blog.csdn.net/baple/article/details/39288817] 安装OpenSSH Ubuntu缺省没有安装SSH Server,使用以下命令安装: sud ...

  7. retrieve jenkins console output

    @Api(value = "console", description = "Retrieve the Console Outputs",produces=Me ...

  8. jQuery的编码标准和最佳实践

    不知道在哪里看到了这篇关于jQuery编码的文章,挺实用的,恰好最近在研究jQuery的基础知识,今天打开收藏夹来翻译一下,原文的英语不难,但是内容很实用,可能有大神已经翻译过了,大家看精华就行了. ...

  9. VS2010统计代码行数 [转]

    按CTRL+SHIFT+F (Find in files),勾上支持正则表达式,然后输入搜索内容:  ^:b*[^:b#/]+.*$ 以上表达式的统计可做到:#开头 和 /开头 或者 空行 都不计入代 ...

  10. DbEntry.Net.v3.5 快速教程

    1.DbEntry 介绍 EN&Download——[DbEntry Framework下载][Tutorials For Version 3.5] CN&Summary:总体特性的介 ...