关于二级联动的功能,以前用asp写过,早忘了……这次的任务是做二级动态联动,所以整理了一下,记录一下,也供大家参考下,有什么问题尽管指出。
实现的功能是这样的:数据库有两个表,一个是college,一个是department,其中,department里面有一个外键是college的主键,两个表之间的联系是一对多的。在页面中,第一个下拉菜单的内容是从college里面读取的数据,当选择了第一个下拉菜单后,第二个显示的是通过ajax读取的表department的内容。下面就开始具体的步骤吧!
首先第一步,要下载dwr.jar包,放到工程lib下。
第二步,在web.xml中配置dwr,加入如下的配置代码:
- <!-- 定义dwr拦截器 -->
- <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,这里可以进行配置。结合我的例子解释一下:
- <dwr>
- <allow>
- <!--javascript属性对应客户端调用的js,new表示用new创造器-->
- <create javascript="myjs" creator="new">
- <!-- name=“class”表示对应的是java类,value属性是对应的后台功能类-->
- <param name="class" value="com.usersope.struts.college.FindDepart" />
- <!--method是说后台类里面的那个方法可以调用-->
- <include method="getdepart"/>
- </create>
- <!--如果后台类返回的是list类型,那就要加上这句 -->
- <convert match="com.usersope.hibernate.DAO.Department" converter="bean"></convert>
- </allow>
- </dwr>
为了测试你的dwr是否已经正确配置好,在浏览器中测试一下,路径是:http://localhost:8080/项目名称/dwr/index.html。注意,这里一定要用html结尾,不知道为什么,小叶也不告诉我……,如果出现下面的页面,则说明成功了!
第四步:前台js的写法。
其实前台主要的就是回调函数。
- <%@ 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">
- -->
- <!-- 导入dwr js文件 -->
- <script type='text/javascript' src='/usersope/dwr/interface/myjs.js'></script>
- <!-- 下面两个是dwr本身自带生成的-->
- <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>
- <!-- listKey是传值内容,id让js获取的,list是列表,listValue是显示选项的内容 -->
- <s:select id="colid" label="college" list="list" listKey="colid"
- listValue="colname" headerKey="0" headerValue="-请选择学院-"
- multiple="false" οnchange="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>
最后,把后台类也放上吧:
- 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的代码,只要你搞清楚了,其中的来龙去脉还是比较好理解的。