今天呢,主要是将一个功能进行实现。我们可以先看一下下面的图片:
今天就是将这个页面的标红部分进行实现。
一.实现的功能
如图标红部分是一个添加角色的功能,所以呢,我们需要用ajax来查询数据库中是否存在要添加的角色名,注意,这里的ajax使用的是同步(由于使用flag标记的原因)。
然后就是把下拉框自动填充和将满足要求的角色添加到数据库中。
二.action代码
实现上述的功能,我们需要编写两个action来处理,一个action是用来验证数据库中是否已经存在角色名,另一个则是将数据添加到数据库中。
1.验证action:
package com.limit.emp.action;
import com.base.abstractclass.BaseAction;
import com.limit.role.bean.T_limit_Role;
import com.limit.role.dao.RoleInterface;
public class CheckRoleIsExistAction extends BaseAction<T_limit_Role>{
//用于模型驱动的对象
T_limit_Role t_limit_Role=new T_limit_Role();
//service层的对象
RoleInterface service=new RoleInterface();
@Override
public T_limit_Role getModel() {
// TODO Auto-generated method stub
return t_limit_Role;
}
@Override
public String execute() {
System.out.println("进入 CheckRoleIsExistAction ");
System.out.println(t_limit_Role.getName());
T_limit_Role result=service.checkRole(t_limit_Role);
//说明用户存在
if(result!=null) {
this.addActionError("no add");
}else {
this.addActionMessage("yes add");
}
return INPUT;
}
}
代码中,由于我们实现了ModelDriven接口,所以我们使用模型驱动来接收前台传递过来的数据。这里就是将接收到的对象当做参数进行一次数据库的查询,并且,如果查询到了,那么就像request对象中存放addActionError信息(addActionError信息其实就是以固定·的key值存放在request对象中的值,它以集合的形式存在)。如果没查询到那么就向request的对象中存放addActionMessage(addActionMessage和addActionError道理相同,只是所访问的key值不同)。
在执行完action后,用return返回值的方式跳转到message.jsp页面(跳转的方式默认为请求转发)。并且,由于使用请求转发来跳转页面,所以在message.jsp页面中,我们可以取出存放在request对象中值(由于是一个对象):
2.添加action
添加操作,我们只需要将前台传递过来的值,插入到数据库中即可。
package com.limit.emp.action;
import java.util.Date;
import com.base.abstractclass.BaseAction;
import com.limit.role.bean.T_limit_Role;
import com.limit.role.dao.RoleInterface;
public class AddRoleAction extends BaseAction<T_limit_Role> {
//service层的对象
RoleInterface service= new RoleInterface();
//用来模型驱动的对象
T_limit_Role t_limit_Role=new T_limit_Role();
@Override
public T_limit_Role getModel() {
// TODO Auto-generated method stub
return t_limit_Role;
}
@Override
public String execute() {
t_limit_Role.setOperateTime(new Date());
t_limit_Role.setOperator(1);
t_limit_Role.setValid(1);
//向数据库中插入数据(role)的方法
boolean result = service.addRole(t_limit_Role);
if(result==true) {
System.out.println("添加角色成功");
}else {
System.out.println("添加角色失败");
}
return "manageT_limit_Role";
}
public static void main(String[] args) {
AddRoleAction a=new AddRoleAction();
a.execute();
}
}
这里同样的使用模型驱动来接收前台传递过来的参数,使用模型驱动,是不需要为模型提供get,set方法的。
三.前台页面ajax
后台的action代码写完之后,我们需要前台向后台来传递值。而传值的方式来我们校验角色名是否在数据库中时,使用ajax,而在保存数据的时候,我们使用表单提交按钮来实现。
<%@page import="com.base.util.TurnPage"%>
<%@page import="com.base.util.SessionTools"%>
<%@page import="com.limit.emp.dao.EmpInterface"%>
<%@page import="com.base.util.StringTools"%>
<%@page import="com.base.statics.YesNoType"%>
<%@page import="com.base.util.DateTools"%>
<%@page import="com.limit.role.bean.T_limit_Role"%>
<%@page import="com.limit.role.dao.T_limit_RoleDao" %>
<%@page import="com.limit.role.dao.RoleInterface"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../../skin/css/style.css" rel="stylesheet" type="text/css" />
<title>menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;" />
<script language='javascript'>var curopenItem = '1';</script>
<script language="javascript" type="text/javascript" src="<%=path %>/js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="<%=path %>/js/JSTools.js"></script>
<%@include file="/js/jquery-ui.jsp" %>
<base target="main" />
<script type="text/javascript">
</script>
<jsp:include page="/validMessage_decode.jsp"></jsp:include>
<!-- 表单的提交和验证 -->
<script>
//进行页面加载事件
$(function(){
$("#name").blur(function(){
checkRoleName();
});
$("#btnAddRole").click(function(){
//进行提交前验证,调用这个方法
var con1=checkRoleName();
//是数字
var con2=!isNaN($("#selPid option:selected").val());
if(con1 && con2 ){
$("#formAddRole").submit();
}else{
$.alert("提交失败");
}
});
});
function checkRoleName(){
var name=$("#name").val();
//不能将a转换正int类型
// var id=$("#selPid option:selected").val();
var flag=false;
/*进行验证*/
$.ajax({
//需要传入的参数
data:{"name":name}, // ,"pid":id
url:'<%=path%>/checkRoleIsExistAction.action',
async:false,
dataType:"json",
success:function(req){
alert(JSON.stringify(req));
$("#roleMessege").html(req.data.value);
if(req.data.key.trim()=="success"){
flag=true;
}
if(req.data.key.trim()=="error"){
flag=false;
}
},
error:function(){
alert("action 执行失败了");
}
});
return flag;
}
//----------------------------------------------------------------------------------------------------------------------------
$(function(){
});
function queryRole(){
//ajax查询
$.ajax({
url:'<%=path%>/queryRoleBean.action',
async:false,
});
}
</script>
</head>
<body leftmargin="8" topmargin="8">
<!-- 弹出层 开始 -->
<center>
<div id="d1" style="display:none;width:97%;height:97%;position:absolute;z-index:100;background-color:white;margin:0 0 0 0px;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;">
<!-- <div id="d2" style="border: 0px solid blue;margin:10% 0 0 20%; width:50%;height:400px; background-color: #EAE8E4;"> -->
<!-- </div> -->
</div>
<div id="d2" style="display:none;border: 0px solid green;margin:15% 0 0 15%; width:70%;height:50%;z-index: 101;position: absolute;">
</div>
<div id="d3" style="display:none;border: 0px solid red;z-index: 102;position:absolute;margin:16% 0 0 65%;" align="right">
<a href=" javascript:void(0);" id="closeDIV">关闭</a>
</div>
</center>
<!-- 弹出层 结束 -->
<!-- 标题 -->
<div class="wdjh_b" style=" padding-left:1%; width:98%">
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="" align="center">
<tr>
<td height="26" align="center"><br /><h1 style=" color:#226411;">添加角色</h1></td>
</tr>
</table>
<!-- 添加角色表单 -->
<table width='100%' border='0' align="center" style="margin-top:8px">
<tr>
<td align='center'>
<!-- 添加角色表单 -->
<form id="formAddRole" action="addRoleAction.action" method="post">
<table border='0' cellpadding='5' cellspacing='0' style="margin-top: 10px;">
<tr>
<td width='170px' align="right">角色名:</td>
<td width='170px'>
<input type='text' id="name" name='name' value='' style='width:150px' />
</td>
<td width="10px">
<span id="roleMessege"></span>
</td>
</tr>
<tr>
<td align="right">所属上级角色名:</td>
<td>
<%
/*查询所有的角色*/
T_limit_RoleDao t_limit_RoleDao=new T_limit_RoleDao();
List<T_limit_Role> list=t_limit_RoleDao.selectAllRole();
%>
<select id="selPid" name="pid" style="width: 155px;">
<option value="a">请选择角色</option>
<%
for(T_limit_Role t:list){
%>
<option value="<%= t.getId()%>">
<%=
t.getName()
%>
</option>
<%
}
%>
<option value="0">-- 顶级角色 --</option>
</select>
</td>
<td>
<span id="roleRightMessege"></span>
</td>
</tr>
<tr>
<td colspan="3" align="center" height="50px">
<input type="button" id="btnAddRole" value="添加"/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<!-- 标题 -->
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="" align="center">
<tr>
<td height="26" align="center"><br /><h1 style=" color:#226411;">管理角色</h1>
</td>
</tr>
</table>
<form name="form1" id="form1" method="post" action="manageT_limit_Role.jsp">
<table width="98%" border="0" cellpadding="2" align="center" style="margin-top:8px">
<tr>
<td align="center">角色名:<input type="text" name="roleName" id="txtRoleName" value=""> <input type="submit" name="sub" id="sub" value="查询" class="button"></td>
</tr>
</table>
</form>
<div class="wdjh_b">
<!-- 内容列表 -->
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#D1DDAA" align="center" style="margin-top:8px;">
<tr bgcolor="#FFFFFF" class="wdjh_ba">
<td height="40" colspan="7" style="text-align:center;"> 角色列表 </td>
</tr>
<tr align="center" bgcolor="#E7E7E7" class="wdjh_ba">
<td width="5%">序号</td>
<td width="20%">角色名</td>
<td width="20%">所属上级角色名</td>
<td width="5%">生效状态</td>
<td width="10%">操作时间</td>
<td width="10%">操作人</td>
<td width="">操作</td>
</tr>
<%
EmpInterface service=new EmpInterface();
List<Map> list1=service.queryRole();
%>
<%
for(Map map:list1){
//for(Object obj:map.keySet()){
%>
<tr align='center' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';">
<td><%= map.get("id")%></td>
<td><%= map.get("name")%></td>
<td><%= map.get("pname")%></td>
<td><%= map.get("valid")%></td>
<td><%= map.get("operateTime")%></td>
<td><%= map.get("operator")%></td>
<td>
<a id="modiRole" href="" onclick="">修改</a> |
<a href="" onclick="return del()">删除</a> |
<a href="">设置</a> |
<a href=""></a>
</a>
</td>
</tr>
<%
// }
}
%>
</table>
<center>
<div class="ym width_">
</div>
</center>
</div>
</body>
</html>
现在我们来简单的看一下上面的代码,我们首先定义了一个 checkRoleName()方法,用ajax来传递数据(这里使用的是同步,而不是异步),使用同步的原因是设立一个标记flag来确实用户是否可以提交表单。
总的来说,用ajax传值是很棒的一个选择,但是我的ajax真的不敢恭维。。。。。。。