一、表单按钮的提交前代表对提交内容的验证
二、表单按钮的提交后代表对把数据提交给后台
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="200px" data-options="{ required:true,validType:'length[2,10]',prompt:'请输入关键字',missingMessage:'请输入用户名' }"> <br><br> 密码：<input class="easyui-textbox" style="200px" data-options="{type:'password', required:true, validType:'length[6,10]'}"> <br><br> 年龄：<input class="easyui-numberbox" style="200px" data-options="{min:18,max:99}"> <br><br> <a id="lb1" class="easyui-linkbutton" href="#" style="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); } }