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

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

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. Angular中的jsonp

    1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 module.controller('InTh ...

  2. MySQL服务 - MySQL列类型、SQL模式、数据字典

    MySQL列类型的作用: 列类型可以简单理解为用来对用户往列种存储数据时做某种范围"限定",它可以定义数据的有效值(字符.数字等).所能占据的最大存储空间.字符长度(定长或变长). ...

  3. 黄聪：GeckoFX如何引用jquery文件并执行自定义JS

    var jquery_script = gwb.Document.CreateElement("script"); jquery_script.SetAttribute(" ...

  4. MFC与C#连接MYSQL乱码问题

    MYSQL数据库编码为:latin1 问题现象:插入中文乱码,及用中文作参数无法得到相应数据 如select * from userinfo where username='李小明' MFC中解决方法 ...

  5. java 泛型编程学习

    先发布,以后有空再修改... 第一次看到<java核心技术卷一>中关于泛型这部分的时候感觉很复杂,似乎有说不完的约束条件,让人难以理解.当时只是囫囵吞枣般过了一遍,也没有看出个什么来.现在 ...

  6. FastJson的使用

    FastJson FastJson:阿里巴巴的一个Json处理工具包,包括序列化和反序列化两部分. <dependency> <groupId>com.alibaba</ ...

  7. TensorFlow中max pooling层各参数的意义

    官方教程中没有解释pooling层各参数的意义,找了很久终于找到,在tensorflow/python/ops/gen_nn_ops.py中有写: def _max_pool(input, ksize ...

  8. mybatis动态调用表名和字段名

    以后慢慢启用个人博客:http://www.yuanrengu.com/index.php/mybatis1021.html 一直在使用Mybatis这个ORM框架,都是使用mybatis里的一些常用 ...

  9. oleDB 导入excel遇到的问题

    本地测试一切ok. 到服务器上测试各种报错,先装了office2010,又装了AccessDatabaseEngine,之后报"Microsoft Excel 不能访问文件 可能的原因有: ...

  10. Python基础篇【第3篇】: Python正则表达式

    正则表达式 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十分强大.正则表达式是一个特殊的 ...