一、表单按钮的提交前代表对提交内容的验证
二、表单按钮的提交后代表对把数据提交给后台
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);
}
}
时间： 2024-12-28 01:39:41