03-EasyUI尚硅谷-form表单
一、表单的基础
把表单放入panel中，对个别控件进行自定义校验器（可以加正则等）、控件的数据格式校验
jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Form Test</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css">
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
// 面板
$("#userDiv").panel({
width: 300,
height: 450,
title: '新增用户'
});
// 用户名和密码校验器
$("input[name='username']").validatebox({
required: true,
validType: 'minLength[2,5]',
missingMessage: '用户名必填'
});
$("input[name='password']").validatebox({
required: true,
validType: 'equalLength[4]',
missingMessage: '密码必填'
});
// 年龄
$("input[name='age']").numberbox({
min: 1,
max: 200,
required: true,
missingMessage: '年龄必填'
});
// 生日
$("input[name='birthday']").datetimebox({
required: true,
missingMessage: '生日必填',
// 只可选择，禁止输入
editable: false
});
// 下拉框(查看easyui.css文件中的combobox-item-hover的css，可以设置鼠标悬停在下拉选项上的颜色)
$("input[name='city']").combobox({
url: 'json/city_data.json', // 这个json文件的编码一定要是utf-8，否则会中文乱码，右键-Properties-设置utf-8
valueField: 'id', // 对应json文件中的key
textField: 'text', // 对应json文件中的key
value: '请选择',
editable: false
});
// 薪水
$("input[name='salary']").numberbox({
min: 2000,
max: 20000,
required: true,
missingMessage: '薪水必填',
precision: 2
});
// 时间日期控件
$("input[name='starttime'],input[name='endtime']").datetimebox({
required: true,
missingMessage: '时间必填',
// 只可选择，禁止输入
editable: false,
// 开始时间不能迟于结束时间
// ...
});
// 个人描述
$("input[name='description']").validatebox({
required: true,
validType: 'minLength[5,50]',
missingMessage: '个人描述必填',
invalidMessage: '个人描述必须在5-50个字符之间！' // 这里使用invalidMessage覆盖掉用户名中的提示信息【原来的不变，只改变这里的提示内容】
});
// 重写了校验器
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
// 校验器，value：用户输入的内容 param：定义的校验数组
validator: function(value, param) {
return value.length >= param[0] && value.length <= param[1];
},
// 如果出错，显示的提示信息
message: "用户名必须在2-5个字符之间！"
},
equalLength: {
// 校验器，value：用户输入的内容 param：定义的校验数组
validator: function(value, param) {
return value.length == param[0];
},
// 如果出错，显示的提示信息
message: "密码必须是4位字符！"
}
});
});
</script>
</head>
<body>
<div id="userDiv" style="background: #fafafa;">
<form action="" method="post" id="userForm" class="easyui-form">
<table id="userTable" style="text-align: right;padding: 20px;" cellpadding="2px;" cellspacing="5px;">
<tr>
<td>用户名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="1" checked="checked"/> 男
<input type="radio" name="sex" value="2"/> 女
</td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" name="age"/></td>
</tr>
<tr>
<td>生日：</td>
<td><input type="text" name="birthday" style="width: 150px;"/></td>
</tr>
<tr>
<td>所属城市：</td>
<td>
<input type="text" name="city" style="width: 150px;"/>
</td>
</tr>
<tr>
<td>薪水：</td>
<td><input type="text" name="salary"/></td>
</tr>
<tr>
<td>开始时间：</td>
<td><input type="text" name="starttime" style="width: 150px;"/></td>
</tr>
<tr>
<td>结束时间：</td>
<td><input type="text" name="endtime" style="width: 150px;"/></td>
</tr>
<tr>
<td>描述：</td>
<td><input type="text" name="description"/></td>
</tr>
<tr>
<td colspan="2"><a id="saveUser" class="easyui-linkbutton">新增</a></td>
</tr>
</table>
</form>
</div>
</body>
</html>
city_data.json：
[
{
"id": 1,
"text": "东莞"
},
{
"id": 2,
"text": "深圳"
},
{
"id": 3,
"text": "广州"
},
{
"id": 4,
"text": "珠海"
},
{
"id": 5,
"text": "佛山"
}
]
效果：
二、表单提交的方式【 以下代码只作为测试演示用，实际开发中不能使用！ 】
1.传统ajax提交
2.定义form自动提交
3.定义form手动提交
--------------------------------------------------
准备：
数据表脚本：
CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(50) DEFAULT NULL, `password` varchar(50) DEFAULT NULL, `sex` varchar(10) DEFAULT NULL, `age` int(10) DEFAULT NULL, `birthday` varchar(50) DEFAULT NULL, `city` int(10) DEFAULT NULL, `salary` varchar(50) DEFAULT NULL, `starttime` varchar(100) DEFAULT NULL, `endtime` varchar(100) DEFAULT NULL, `description` varchar(500) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
User.java:
public class User implements Serializable {
private String id;
private String username;
private String password;
private String sex;
private String age;
private String birthday;
private String city;
private String salary;
private String starttime;
private String endtime;
private String description;
DBHelper.java:
package sxt.easyui.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class DBHelper {
// 数据库连接参数
public static final String DRIVERCLASS = "com.mysql.jdbc.Driver";
public static final String URL = "jdbc:mysql://localhost:3306/easyui?useUnicode=true&characterEncoding=utf-8";
public static final String USRENAME = "root";
public static final String PASSWORD = "123456";
// Connection
public static Connection getConn() {
Connection conn = null;
try {
Class.forName(DRIVERCLASS);
conn = DriverManager.getConnection(URL, USRENAME, PASSWORD);
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
// PrepareStatement
public static PreparedStatement prepare(Connection conn, String sql) {
PreparedStatement ps = null;
try {
ps = conn.prepareStatement(sql);
} catch (SQLException e) {
e.printStackTrace();
}
return ps;
}
// 关闭数据库, 释放资源
public static void close(ResultSet rs) {
if (rs != null) {
try {
rs.close();
rs = null;
} catch (Exception e) {
e.printStackTrace();
}
}
}
public static void close(PreparedStatement ps) {
if (ps != null) {
try {
ps.close();
ps = null;
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public static void close(Connection conn) {
if (conn != null) {
try {
conn.close();
conn = null;
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
web.xml:
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>Easyui</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>UserServlet</servlet-name> <servlet-class>sxt.easyui.servlet.UserServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>UserServlet</servlet-name> <url-pattern>/UserServlet</url-pattern> </servlet-mapping> </web-app>
UserServlet.java:
package sxt.easyui.servlet;
import java.io.IOException;
import java.sql.Connection;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import sxt.easyui.util.DBHelper;
import com.mysql.jdbc.PreparedStatement;
@SuppressWarnings("serial")
public class UserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String method = req.getParameter("method");
if ("saveUser".equals(method)) {
this.saveUser(req, resp);
}
}
// 新增用户
private void saveUser(HttpServletRequest req, HttpServletResponse resp) {
// 接收表单数据
String username = req.getParameter("username");
String password = req.getParameter("password");
String sex = req.getParameter("sex");
String age = req.getParameter("age");
String birthday = req.getParameter("birthday");
String city = req.getParameter("city");
String salary = req.getParameter("salary");
String starttime = req.getParameter("starttime");
String endtime = req.getParameter("endtime");
String description = req.getParameter("description");
// 构建User对象
/*User user = new User(id, username, password, sex, age, birthday,
city, salary, starttime, endtime, description);*/
// 插入记录
Connection conn = DBHelper.getConn();
String sql = "INSERT INTO user(username, password, sex, age, birthday, city, salary, starttime, endtime, description) "
+ "VALUES('"+username+"','"+password+"','"+sex+"','"+age+"','"+birthday+"','"+city+"','"+salary+"','"+starttime
+"','"+endtime+"','"+description+"')";
PreparedStatement ps = (PreparedStatement) DBHelper.prepare(conn, sql);
resp.setContentType("text/html;charset=utf-8");
String str = "";
try {
// int a = 1/0; // 操作失败演示
int count = ps.executeUpdate();
// 用户添加成功后返回：{"status":"ok","message":"操作成功！"}，失败返回：// 用户添加成功后返回：{"status":"error","message":"操作失败！"}
if (count == 1) {
str = "{\"status\":\"ok\",\"message\":\"操作成功！\"}";
} else {
str = "{\"status\":\"error\",\"message\":\"操作失败！\"}";
}
} catch (Exception e) {
str = "{\"status\":\"error\",\"message\":\"操作失败！\"}";
e.printStackTrace();
} finally {
// 不管操作成功或者失败，都会执行这里的代码
try {
resp.getWriter().write(str);
} catch (IOException e) {
e.printStackTrace();
}
DBHelper.close(ps);
DBHelper.close(conn);
}
}
}
1.传统ajax提交
003.jsp:(form表单省略，在上面的代码可以找到，这里只写ajax方法)
// 提交表单
$("#saveUserBtn").click(function() {
$.ajax({
type: "post", // 提交方式
url: "UserServlet?method=saveUser", // 提交地址
cache: false, // 是否缓存
data: $("#userForm").serialize(), // 提交的数据，这里不需要一个个去构造js对象/json串，直接将表单序列化成username=xxx&password=xxx的字串
dataType: "text", // 请求成功后响应的数据类型，可以是text/html/xml/json等等
success: function(result) {
//var result = eval("("+result+")");
var result = $.parseJSON(result);
$.messager.show({
title: result.status,
msg: result.message
});
},
error: function(result) {
var result = $.parseJSON(result);
$.messager.show({
title: result.status,
msg: result.message
});
}
});
});
效果：
添加成功或者失败都会在屏幕右下角弹出操作提示信息。
2.定义form自动提交
// 提交表单，使用easyui的表单提交方式提交表单
$("#saveUserBtn").click(function() {
$("#userForm").form('submit', {
url: "UserServlet?method=saveUser",
onSubmit: function() {
// 如果表单校验不通过，就阻止表单提交
if (!$("#userForm").form('validate')) {
$.messager.show({
title: "提示信息",
msg: "验证没有通过，不能提交表单！"
});
return false; // 阻止提交
}
},
success: function(result) {
var result = $.parseJSON(result);
$.messager.show({
title: result.status,
msg: result.message
});
},
error: function(result) {
var result = $.parseJSON(result);
$.messager.show({
title: result.status,
msg: result.message
});
}
});
});
效果同上；
按回车提交表单：
// 提交表单，使用easyui的表单提交方式提交表单 $("#userForm").find("input").on("keyup", function(event) { if (event.keyCode == 13) { $("#userForm").form('submit', { url: "UserServlet?method=saveUser", onSubmit: function() { // 如果表单校验不通过，就阻止表单提交 if (!$("#userForm").form('validate')) { $.messager.show({ title: "提示信息", msg: "验证没有通过，不能提交表单！" }); return false; // 阻止提交 } }, success: function(result) { var result = $.parseJSON(result); $.messager.show({ title: result.status, msg: result.message }); }, error: function(result) { var result = $.parseJSON(result); $.messager.show({ title: result.status, msg: result.message }); } }); } });
当光标在表单控件上，按回车，就会提交表单，如果表单校验不通过，那么屏幕右下角就会弹出提示框。
3.定义form手动提交【 使用场景：多种方式提交表单的时候，比如回车可以提交表单，点击保存按钮也可以提交表单，为了代码不重复，就使用这种情况：
先定义好表单，然后各种方式进行提交】
浙公网安备 33010602011771号