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

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

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. Python与PHP通过XMLRPC进行通信

    Python与PHP通过XMLRPC进行通信:服务器端用Python,客户端用PHP. 服务器端:xmlrpc_server.py #!/usr/bin/python # coding: UTF-8 ...

  2. nginx下rewrite参数超过9个的解决方法

    nginx 在处理多于9个参数的时候,是采用重命名的方法来实现的: /?m?([0-9,]*)h?(\d*)a?([0-9,]*)c?(\d*)s?(x?f?(?P<f>[0-9,]*)/ ...

  3. C# HmacMD5 加密

    string HmacMD5(string source, string key) { HMACMD5 hmacmd = new HMACMD5(Encoding.Default.GetBytes(k ...

  4. Processing 电子罗盘校准(以 MPU9250为例)

    使用Processing 软件, 通过 arduino 输入 电子罗盘的数据,通过PC端进行校准,程序如下: import processing.serial.*; Serial myPort; Ar ...

  5. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  6. (C++) LNK2019: unresolved external symbol.

    Error 33 error LNK2019: unresolved external symbol "\xxx.obj yyy.Native 仔细看看错误信息,后来发现尽然是构造函数的一个 ...

  7. springmvc登陆拦截案例

    一.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=&qu ...

  8. 作品-网站 - [二次开发] 广联达BIM

    客户地区:北京 基于帝国ECMS二次开发 网址:http://bim.glodon.com 开发性质:二次开发 网站类型:企业级

  9. 怎么打开sql server 数据库日志文件

    To Open Log File Viewer, 1. Expand Server Node > 2. Expand SQL Server Agent > 3. Expand Jobs & ...

  10. 用exp导数据时遇到oracle 1455的错误

    exp scott/scott@orcl file=d:\impbak\20161214.dmp owner=scott TRIGGERS=n INDEXES=n STATISTICS=none(ow ...