dwr+struts2+hibernate实现二级动态联动

来源：互联网发布：手机什么软件最省电编辑：程序博客网时间：2024/04/26 23:12

关于二级联动的功能，以前用asp写过，早忘了……这次的任务是做二级动态联动，所以整理了一下，记录一下，也供大家参考下，有什么问题尽管指出。

实现的功能是这样的：数据库有两个表，一个是college，一个是department，其中，department里面有一个外键是college的主键，两个表之间的联系是一对多的。在页面中，第一个下拉菜单的内容是从college里面读取的数据，当选择了第一个下拉菜单后，第二个显示的是通过ajax读取的表department的内容。下面就开始具体的步骤吧！

首先第一步，要下载dwr.jar包，放到工程lib下。

第二步，在web.xml中配置dwr，加入如下的配置代码：

Code:

<servlet>
<servlet-name>dwr</servlet-name>
<servlet-class>
org.directwebremoting.servlet.DwrServlet
</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

第三步：在web.xml同目录下新建dwr.xml，这里可以进行配置。结合我的例子解释一下：

Code:

<dwr>
<allow>
<create javascript="myjs" creator="new">
<param name="class" value="com.usersope.struts.college.FindDepart" />
<include method="getdepart"/>
</create>
<convert match="com.usersope.hibernate.DAO.Department" converter="bean"></convert>
</allow>
</dwr>

为了测试你的dwr是否已经正确配置好，在浏览器中测试一下，路径是：http://localhost:8080/项目名称/dwr/index.html。注意，这里一定要用html结尾，不知道为什么，小叶也不告诉我……，如果出现下面的页面，则说明成功了！

第四步：前台js的写法。

其实前台主要的就是回调函数。

Code:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
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>welcome login in</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="styles.css">
-->
<script type='text/javascript' src='/usersope/dwr/interface/myjs.js'></script>
<script type='text/javascript' src='/usersope/dwr/engine.js'></script>
<script type='text/javascript' src='/usersope/dwr/util.js'></script>
<script type="text/javascript">
//获取函数
function getdepart(){
var colid = document.getElementById("colid").value;
myjs.getdepart(colid,getdeparts_back);
}
//获取回调函数,名字取决于上面那行
//参数data是接受的action的返回值，这个是list类型的。然后将list加载到下拉列表框中
function getdeparts_back(data)
{
var s = document.getElementById("depart");
for(var i=0;i<data.length;i++)
{
var opt=new Option(data[i].dename,data[i].value);
s.options[i]=opt;
}
}
</script>
</head>
<body bgcolor="#eeeeee">
<center>注册</center>
<s:form action="RegistAction.action" name="form1" method="post" validate="true">
<table align="center" width="60%" border="1" >
<tr>
<td><s:textfield id="username" name="users.username" label="User Name"/>
<span id="message"> </span>
</td>
</tr>
<tr>
<td><s:password id="password" name="users.password" label="Pass word"/>
<span id="messages"> </span>
</td>
</tr>
<tr>
<td>
<div>
<s:select id="colid" label="college" list="list" listKey="colid"
listValue="colname" headerKey="0" headerValue="-请选择学院-"
multiple="false" onchange="getdepart()" name="users.college"/>
<s:select id="depart" label="department" list="#{}" listKey="dename"
headerKey="0" headerValue="-请选择系别-"
name="users.depart"
multiple="false" />
</div>
</td>
</tr>
<tr>
<td><input type="submit" value=" Regist "/></td>
<td><input type="reset" value=" Reset "/></td>
</tr>
</table>
</s:form>
<div style="padding:0,0,0,700px;">
<form action="index.action" name="form2" method="post">
<input type="submit" value="Go Index "/>
</form>
</div>
</body>
</html>

最后，把后台类也放上吧：

Code:

public class FindDepart{
List departlist;
public List getDepartlist() {
return departlist;
}
public void setDepartlist(List departlist) {
this.departlist = departlist;
}
UsersDAOEx dao = new UsersDAOEx();
public List getdepart(int colid) {
//自己定义的一个可以传递不定参数的方法，这里就直接调用啦~
departlist = dao.findList("from Department D where D.colid = ?", colid);
return departlist;
}
}

整个过程应该就是这样的。利用dwr简化了很多ajax的代码，只要你搞清楚了，其中的来龙去脉还是比较好理解的。