04-EasyUI_登陆的实现
登陆
- 模式登陆框- 登陆成功, 右下角弹提示框, 2秒后消失
- 登陆失败, 弹出模式对话框提示
- Ajax提交表单信息,servlet处理
- dialog,messager的应用
- 登陆项目下载 EasyUI_简单登陆界面.zip (MyEclipse2013项目拷贝)
- 截图 
步骤:
1. 弹出 dialog
将指定id的div渲染成dialog
2. 去掉dialog右上角关闭按钮
dialog
Dependencies
window
linkbutton
window
Dependencies
draggable
resizable
panel
panel的属性
|-- closable:boolean,Defines if to show closable button.
3. 模式化dialog
dialog
Dependencies
window
linkbutton
window的属性
|-- modal:boolean,Defines if window is a modal window.
4. 添加文本框(用户名,密码)
1) 直接在<div>的body里写<input>
2) 使用<table>布局
3) CSS样式: 用户名/密码 标签, 居右
4) 将<table>放入<form>
<div id="loginAndRegDialog" title="用户登陆" style="width:250px;height:200px;" > <form id="loginInputForm" action="post"> <table> <tr> <th>用户名</th> <td><input name="name" type="text"/></td> </tr> <tr> <th>密码</th> <td><input name="password" type="password"/></td> </tr> </table> </form> </div>
5. 添加注册和登陆按钮
dialog的属性
|-- buttons: array, each button options is same as linkbutton.
buttons : [ {
text : '注册', // 标签
handler : function() {} // 点击后的触发的函数
}, {
text : '登陆',
handler : function() {}
} ]
6. 验证登陆按钮的handler(注: 不要用alert)
{text : '登陆',
handler : function() {
console.info('我点击了登陆按钮....');
}
}
7. 提交用户名密码
1) 提交方式
A. form表单提交
B. 序列化表单,Ajax提交
2) Ajax提交
A. 参看jQuery关于$.ajax()的详细说明(见下面 "页面完整代码")
B. 处理登陆的servlet(见下面 "服务器端servlet")
C. Firebug 查看Ajax是否请求成功(截图1.jpg)
8. 处理结果
- 失败: messager 弹对模式话框- 成功: 隐藏 dialog,并右下角弹对话框
success : function(data, textStatus) { // 请求成功后的回调函数
//console.info(data);
//console.info(data.msg);
//$.messager.alert('标题',data.msg);
if (data && data.success) { // 成功, 隐藏dialog
loginAndRegDialog.dialog('close');
$.messager.show({
title : "提示",
msg : data.msg,
timeout:2000,
});
} else { // 失败, 弹 对话框
$.messager.alert('标题',data.msg);
}
},
技巧:
1. 以id的值作为全局变量, 方便定位dom, 如下
<script type="text/javascript">
var loginAndRegDialog;
$(function(){
});
</script>
<div id="loginAndRegDialog"></div>
2. 使用JS获得项目的URL
// 获取项目的URL
function getCurProjPath() {
var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPath = curWwwPath.substring(0, pos);
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
return (localhostPath + projectName);
}
//console.info(getCurProjPath());
3. 将表格里的内容序列化为字符串
$("#loginInputForm").serialize()
==> name=zhangsan&password=123
服务器端servlet
package foo.ui.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserLoginServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String password = request.getParameter("password");
System.out.println("name=" + name + "\npassword=" + password);
String resultJson = null;
// 失败
resultJson = "{\"success\":false,\"msg\":\"用户名或密码错误!\"}";
// 成功
if ( name != null && "admin".equals(name) ) {
resultJson = "{\"success\":true,\"msg\":\"登陆成功....\"}";
}
response.getWriter().print(resultJson);
}
}
页面完整代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>login</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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>
<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">
<!--
登陆: 使用 dialog 做登陆界面
步骤:
1. 弹出 dialog
将指定id的div渲染成dialog
2. 去掉dialog右上角关闭按钮
dialog
Dependencies
window
linkbutton
window
Dependencies
draggable
resizable
panel
panel的属性
|-- closable:boolean,Defines if to show closable button.
3. 模式化dialog
dialog
Dependencies
window
linkbutton
window的属性
|-- modal:boolean,Defines if window is a modal window.
4. 添加文本框(用户名,密码)
1) 直接在<div>的body里写<input>
2) 使用<table>布局
3) CSS样式: 用户名/密码 标签, 居右
4) 将<table>放入<form>
5. 添加注册按钮
dialog的属性
|-- buttons: array, each button options is same as linkbutton.
buttons : [ {
text : '注册', // 标签
handler : function() {} // 点击后的触发的函数
}, {
text : '登陆',
handler : function() {}
} ]
6. 验证登陆按钮的handler(注: 不要用alert)
{
text : '登陆',
handler : function() {
console.info('我点击了登陆按钮....');
}
}
7. 提交用户名密码
1) 提交方式
A. form表单提交
B. 序列化表单,Ajax提交
2) Ajax提交
A. 参看jQuery关于$.ajax()的详细说明
B. 处理登陆的servlet
C. Firebug 查看Ajax是否请求成功(截图1.jpg)
8. 处理结果
- 失败: messager 弹对模式话框
- 成功: 隐藏 dialog,并右下角弹对话框
技巧:
1. 以id的值作为全局变量, 方便定位dom, 如下
<script type="text/javascript">
var loginAndRegDialog;
$(function(){
});
</script>
<div id="loginAndRegDialog"></div>
2. 使用JS获得项目的URL
3. 将表格里的内容序列化为字符串
$("#loginInputForm").serialize()
==> name=zhangsan&password=123
-->
<script type="text/javascript">
// 获取项目的URL
function getCurProjPath() {
var curWwwPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
var localhostPath = curWwwPath.substring(0, pos);
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
return (localhostPath + projectName);
}
//console.info(getCurProjPath());
</script>
<script type="text/javascript" charset="UTF-8">
var loginAndRegDialog;
$(function() {
loginAndRegDialog = $("#loginAndRegDialog");
// 将div渲染程dialog
loginAndRegDialog.dialog({
closable : false,
modal : true,
buttons : [ {
text : '注册',
handler : function() {
}
}, {
text : '登陆',
handler : function() {
//console.info('我点击了登陆按钮....');
$.ajax({
type : "POST", // 请求方式 ("POST" 或 "GET")， 默认为 "GET"
url : getCurProjPath() + '/userLoginServlet',
/*data : { // 发送到服务器的数据
name : $("#loginInputForm input[name=name]").val(),
password : $("#loginInputForm input[name=password]").val()
},*/
data : $("#loginInputForm").serialize(),
cache : false, // 不缓存此页面
dataType : 'json', // 预期服务器返回的数据类型。
success : function(data, textStatus) { // 请求成功后的回调函数
//console.info(data);
//console.info(data.msg);
//$.messager.alert('标题',data.msg);
if (data && data.success) { // 成功, 隐藏dialog
loginAndRegDialog.dialog('close');
$.messager.show({
title : "提示",
msg : data.msg,
timeout:2000,
});
} else { // 失败, 弹 对话框
$.messager.alert('标题',data.msg);
}
},
error : function (XMLHttpRequest, textStatus, errorThrown) {
console.info("Ajax 执行失败");
}
});
}
} ]
});
});
</script>
<style type="text/css">
/* 标签居右 */
th{
text-align: right;
}
</style>
</head>
<body>
<div id="loginAndRegDialog"
title="用户登陆"
style="width:250px;height:200px;"
>
<form id="loginInputForm" action="post">
<table>
<tr>
<th>用户名</th>
<td><input name="name" type="text"/></td>
</tr>
<tr>
<th>密码</th>
<td><input name="password" type="password"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>