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

最新推荐文章于 2017-10-31 14:41:31 发布

最新推荐文章于 2017-10-31 14:41:31 发布 · 79 阅读

文章标签：

#java #web.xml #javascript #ViewUI

本文介绍了一种使用DWR简化AJAX代码实现二级联动的方法。通过配置DWR及前端JS，实现在用户选择学院后动态加载对应系别。文章详细展示了从环境搭建到前后端代码的具体实现。

关于二级联动的功能，以前用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>
<createjavascript="myjs"creator="new">
<paramname="class"value="com.usersope.struts.college.FindDepart"/>
<includemethod="getdepart"/>
</create>
<convertmatch="com.usersope.hibernate.DAO.Department"converter="bean"></convert>
</allow>
</dwr>

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

第四步：前台js的写法。

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

Code:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<%@taglibprefix="s"uri="/struts-tags"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<basehref="<%=basePath%>">
<title>welcomeloginin</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<scripttype='text/javascript'src='/usersope/dwr/interface/myjs.js'></script>
<scripttype='text/javascript'src='/usersope/dwr/engine.js'></script>
<scripttype='text/javascript'src='/usersope/dwr/util.js'></script>
<scripttype="text/javascript">
//获取函数
functiongetdepart(){
varcolid=document.getElementById("colid").value;
myjs.getdepart(colid,getdeparts_back);
}
//获取回调函数,名字取决于上面那行
//参数data是接受的action的返回值，这个是list类型的。然后将list加载到下拉列表框中
functiongetdeparts_back(data)
{
vars=document.getElementById("depart");
for(vari=0;i<data.length;i++)
{
varopt=newOption(data[i].dename,data[i].value);
s.options[i]=opt;
}
}
</script>
</head>
<bodybgcolor="#eeeeee">
<center>注册</center>
<s:formaction="RegistAction.action"name="form1"method="post"validate="true">
<tablealign="center"width="60%"border="1">
<tr>
<td><s:textfieldid="username"name="users.username"label="UserName"/>
<spanid="message"></span>
</td>
</tr>
<tr>
<td><s:passwordid="password"name="users.password"label="Password"/>
<spanid="messages"></span>
</td>
</tr>
<tr>
<td>
<div>
<s:selectid="colid"label="college"list="list"listKey="colid"
listValue="colname"headerKey="0"headerValue="-请选择学院-"
multiple="false"onchange="getdepart()"name="users.college"/>
<s:selectid="depart"label="department"list="#{}"listKey="dename"
headerKey="0"headerValue="-请选择系别-"
name="users.depart"
multiple="false"/>
</div>
</td>
</tr>
<tr>
<td><inputtype="submit"value="Regist"/></td>
<td><inputtype="reset"value="Reset"/></td>
</tr>
</table>
</s:form>
<divstyle="padding:0,0,0,700px;">
<formaction="index.action"name="form2"method="post">
<inputtype="submit"value="GoIndex"/>
</form>
</div>
</body>
</html>