一、EasyUI组件的简单介绍
easyUI提供了很多组件让我们使用，如下图所示：
使用这些组件可以帮助我们快速地进行项目开发，下面以一个用户登录程序为例讲解EasyUI组件的使用
二、EasyUI组件的使用
2.1、创建测试的JavaWeb项目
2.2、编写测试代码
编写一个用户登录页面Login1.html，用于输入用户名和密码进行登录，使用JQuery的ajax方法异步提交表单
Login1.html的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>EasyUI组件使用范例</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入JQuery -->
<script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.5/themes/icon.css" type="text/css"/>
<script type="text/javascript" src="js/Utils.js"></script>
<script type="text/javascript">
$(function(){
//console.info(g_contextPath);
//console.info(g_basePath);
//页面加载完成之后创建登录的dialog
$('#loginAndRegisterForm').dialog({
title: '用户登录',
width: 240,
height: 150,
closable: false,//设置dialog不允许被关闭
cache: false,
modal: true,
buttons:[
{
text:'登录',
iconCls: 'icon-ok',
width:70,
height:30,
handler:function(){
//console.info(g_contextPath+'/servlet/LoginHandleServlet');
//console.info(g_basePath+'/servlet/LoginHandleServlet');
//console.info($('#loginForm').serialize());//在火狐中打印的结果：userName=gacl&userPwd=123
loginHandle();//处理用户登录
}
},
{
text:'重置',
iconCls: 'icon-ok',
width:70,
height:30,
handler:function(){
doReset('loginForm');
}
}
]
});
/*重置form表单*/
function doReset(formId){
$(':input','#'+formId)
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}
/*处理用户登录*/
function loginHandle(){
$.ajax({
//url:g_contextPath+'/servlet/LoginHandleServlet',
url:g_basePath+'/servlet/LoginHandleServlet',//url表示服务器端处理用户登录的URL地址
/*data:{
//data表示要提交到服务器端的数据，通常的写法
"userName":$("#userName").val(),
"userPwd":$("#userPwd").val()
},*/
//data表示要提交到服务器端的数据，更加简洁的写法
data:$('#loginForm').serialize(),//serialize()方法的作用是将form表单中的内容序列化成字符串
cahe:false,
/*
用dataType来指明服务器端返回的数据格式是一个json字符串，客户端接收到返回的json字符串之后，
Jquery会自动把这个json字符串转换成一个Json对象
*/
dataType:'json',
success:function(r){
//此时的r已经是经过Jquery处理过之后的Json对象了
//console.info(r.msg);
if(r && r.success){
//调用dialog的close方法关闭dialog
$('#loginAndRegisterForm').dialog('close');
$.messager.show({
title:'消息',
msg:r.msg
});
//登录成功后跳转到系统首页
//window.location.replace(g_basePath+'/index.jsp');
//window.location.href = g_basePath+'/index.jsp';
}else{
$.messager.alert('消息',r.msg);
}
}
});
}
});
</script>
</head>
<body>
<div id="loginAndRegisterForm">
<form method="post" id="loginForm">
<table>
<tr>
<th style="text-align:left;">
用户名：
</th>
<td>
<!-- class="easyui-textbox"表示使用EasyUI的textbox组件-->
<input type="text" id="userName" style="width:150px;" name="userName" class="easyui-textbox"/>
</td>
</tr>
<tr>
<th style="text-align:left;">
密码：
</th>
<td>
<input type="password" id="userPwd" style="width:150px;" name="userPwd" class="easyui-textbox"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>Login1.html页面运行效果如下：
Login1.html中用到了一个Utils.js，Utils.js中有两个方法：getBasePath和getContextPath，分别用于获取Web应用的basePath和contextPath，获取Web应用的basePath和contextPath的目的就是为了在提交form表单到指定的Sevlet中进行处理时拼凑出处理请求的Servlet的绝对路径
例如：
url:g_contextPath+'
rvlet/LoginHandleServlet'
url:g_basePath+'rvlet/LoginHandleServlet'
这样无论Servlet如何映射url-pattern，都可以正确找到该Servlet
Utils.js代码如下：
//立即执行的js
(function() {
//获取contextPath
var contextPath = getContextPath();
//获取basePath
var basePath = getBasePath();
//将获取到contextPath和basePath分别赋值给window对象的g_contextPath属性和g_basePath属性
window.g_contextPath = contextPath;
window.g_basePath = basePath;
})();
/**
* @author 孤傲苍狼
* 获得项目根路径，等价于jsp页面中
* <%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
* 使用方法：getBasePath();
* @returns 项目的根路径
*
*/
function getBasePath() {
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);
}
/**
* @author 孤傲苍狼
* 获取Web应用的contextPath，等价于jsp页面中
* <%
String path = request.getContextPath();
%>
* 使用方法:getContextPath();
* @returns /项目名称(/EasyUIStudy_20141104)
*/
function getContextPath() {
return window.document.location.pathname.substring(0, window.document.location.pathname.indexOf('\/', 1));
};处理用户登录请求的Servlet的LoginHandleServlet代码如下：
package me.gacl.web.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import me.gacl.custom.model.Json;
public class LoginHandleServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//服务器端使用UTF-8编码将响应内容输出到客户端
response.setCharacterEncoding("UTF-8");
//通知客户端浏览器以UTF-8编码显示内容，避免产生中文乱码问题
response.setHeader("content-type", "text/html;charset=UTF-8");
String userName = request.getParameter("userName");
String userPwd = request.getParameter("userPwd");
Json json = new Json();
if (userName.equals("gacl") && userPwd.equals("123")) {
json.setMsg("登录成功");
json.setSuccess(true);
}else {
json.setMsg("用户名或密码错误，登录失败！");
json.setSuccess(false);
}
//使用alibaba(阿里巴巴)的fastJson工具类将Json对象转换成一个json字符串
String jsonStr = JSON.toJSONString(json);
//将json字符串作为响应内容输出到客户端浏览器。
response.getWriter().write(jsonStr);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
EasyUI提供的form组件实现登录
Login1.html中是以传统的ajax异步提交form表单的，下面我们来看看如何使用EasyUI提供的form组件来实现相同的功能，编写一个Login2.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>EasyUI组件使用范例</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入JQuery -->
<script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="jquery-easyui-1.5/themes/icon.css" type="text/css"/>
<script type="text/javascript" src="js/Utils.js"></script>
<script type="text/javascript">
$(function(){
//console.info(g_contextPath);
//console.info(g_basePath);
$('#loginAndRegisterForm').dialog({
title: '用户登录',
width: 240,
height: 150,
closable: false,//设置dialog不允许被关闭
cache: false,
modal: true,
buttons:[
{
text:'登录',
iconCls: 'icon-ok',
width:70,
height:30,
handler:function(){
//console.info(g_contextPath+'/servlet/LoginHandleServlet');
//console.info(g_basePath+'/servlet/LoginHandleServlet');
//console.info($('#loginForm').serialize());//在火狐中打印的结果：userName=gacl&userPwd=123
loginHandle();//处理用户登录
}
},
{
text:'重置',
iconCls: 'icon-ok',
width:70,
height:30,
handler:function(){
doReset('loginForm');
}
}
]
});
/*重置form表单*/
function doReset(formId){
$(':input','#'+formId)
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}
/*处理用户登录*/
function loginHandle(){
//使用EasyUI提供的form组件来提交表单
$('#loginForm').form('submit',{
//url:g_contextPath+'/servlet/LoginHandleServlet',
url:g_basePath+'/servlet/LoginHandleServlet',//url表示服务器端处理用户登录的URL地址
success:function(r){
//注意：此时的r只是一个普通的Json字符串，因此需要手动把它变成Json对象
//console.info(r);
//r = JSON.parse(r);//利用IE8支持的原生JSON对象的parse方法将json字符串转换成标准的JSON对象
//r=eval('('+r+')');//利用eval方法将将json字符串转换成标准的JSON对象
r = $.parseJSON(r);//利用Jquery的parseJSONfang将json字符串转换成标准的JSON对象
//console.info(r);
if(r && r.success){
//调用dialog的close方法关闭dialog
$('#loginAndRegisterForm').dialog('close');
$.messager.show({
title:'消息',
msg:r.msg
});
//登录成功后跳转到系统首页
//window.location.replace(g_basePath+'/index.jsp');
//window.location.href = g_basePath+'/index.jsp';
}else{
$.messager.alert('消息',r.msg);
}
}
});
}
});
</script>
</head>
<body>
孤傲苍狼
<div id="loginAndRegisterForm">
<form method="post" id="loginForm">
<table>
<tr>
<th style="text-align:left;">用户名：</th>
<!-- class="easyui-textbox"表示使用EasyUI的textbox组件-->
<td><input type="text" id="userName" style="width:150px;" name="userName" class="easyui-textbox"/></td>
</tr>
<tr>
<th style="text-align:left;">密码：</th>
<td><input type="password" id="userPwd" style="width:150px;" name="userPwd" class="easyui-textbox"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>
其结果和第一种方法一样。
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程