程序员人生 网站导航

struts2+spring+hibernate+dwr3实现下拉框二级联动

栏目:htmlcss时间:2015-01-09 09:01:10

3大框架如何整合我这就不说了,csdn里很多大神都有详细整合博客。

由于是用spring管理了struts2和hibernate,所以我们只要把spring与dwr整合就好了。


首先我们需要dwr.jar我用的是最新的dwr3,之前测试过dwr2也是成功的。

先把我们的dwr.jar放到工程的lib目录下,再在web.xml的同等级目录下新建1个dwr.xml。

这是我的dwr.xml配置

<?xml version="1.0" encoding="UTF⑻"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd"> <dwr> <allow> <!-- List到页面上,就是数组。Map到页面上,就这样去rtu["字段名称"],如过从数据库中查询到的,记得字段名称大写 --> <convert converter="array" match="*"/> <convert converter="array" match="[[*"/> <convert converter="collection" match="java.util.Collection"/> <!-- 传统的DWR --> <create javascript="CourseAction" creator="spring"> <param name="beanName" value="courseAction" /> </create> //你所需要用到的javabean <convert converter="bean" match="com.jxust.bean.Chapter"> </convert> <convert converter="bean" match="com.jxust.bean.Course"> </convert> <convert converter="bean" match="com.jxust.service.serviceImpl.VideoServiceImpl"> </convert> </allow> <signatures> <![CDATA[ import java.util.Map ; import java.util.List ; ]]> </signatures> </dwr>
接着再在web.xml里面加入这段代码

<!-- dwr配置 --> <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class> org.directwebremoting.servlet.DwrServlet </servlet-class> <init-param> <param-name>config-dwr</param-name> <param-value>/WEB-INF/dwr.xml</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>activeReverseAjaxEnabled</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name> initApplicationScopeCreatorsAtStartup </param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>maxWaitAfterWrite</param-name> <param-value>500</param-value> </init-param> <init-param> <param-name>allowGetForSafariButMakeForgeryEasier</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>crossDomainSessionSecurity</param-name> <param-value>false</param-value> </init-param> <load-on-startup>2</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>

这是用来配置dwr的。


接着在你所要引入的dwr的页面上引入/dwr/util.js、/dwr/engine.js、和你要操作的java方法我这里用的是引入了action里面的方法/dwr/interface/CourseAction.js

<script type='text/javascript'src="<s:url value='/dwr/util.js'/>"></script> <script type='text/javascript' src="<s:url value='/dwr/engine.js'/>"></script> <script type='text/javascript' src="<s:url value='/dwr/interface/CourseAction.js'/>"></script>

我测试过好像dwr的两个工具类不可以放在引入action方法后面,如有毛病请大神改正。

下面是我的页面完全代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF⑻"%> <%@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>videoUpload</title> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type='text/javascript'src="<s:url value='/dwr/util.js'/>"></script> <script type='text/javascript' src="<s:url value='/dwr/engine.js'/>"></script> <script type='text/javascript' src="<s:url value='/dwr/interface/CourseAction.js'/>"></script> <script> function getList(){ var course=document.getElementById("course_title").value; CourseAction.getChapterList(course,getChapter_callback) } function getChapter_callback(data){ alert(data); var chapter=document.getElementById("course_chapter"); chapter.options.length=0; for(var i=0;i<data.length;i++) { var opt=document.createElement("option") opt.value=data[i].title; opt.innerText=data[i].title; //var opt=new option(data[i].title,data[i]); chapter.appendChild(opt); } } </script> </head> <body> <s:form name="videoForm" id="videoForm" action="courseAction_addVideo" method="post"> <table width="100%" border="0" cellpadding="1" cellspacing="1"> <tr bgcolor="#ccccff" > <td colspan="2" align="center"><strong>添加视频</strong></td> </tr> <tr bgcolor="#ccccff" > <td width="18%">选择课程</td> <td width="82%"><s:select onchange="getList();" name="course.name" id="course_title" list="#CourseList" headerKey="0" headerValue="-请选择课程-" listKey="name" listValue="name" /></td> </tr> <tr bgcolor="#ccccff" > <td>选择章节名称:</td> <td><s:select name="chapter.title" id="course_chapter" list="#{}" listKey="title" /></td> </tr> <tr bgcolor="#ccccff" > <td>确认添加</td> <td><input type="button" id="button" value="确认添加"/></td> </tr> </table> </s:form> </body> </html>

索性把java代码也贴出来


//dwr2级联动 public Set<Chapter> getChapterList(String name)throws Exception{ System.out.println("asdfasd"); Course course=courseService.findBytitle(name); getChapterList=course.getCourseChapter(); return getChapterList; }

List 的getter、setter方法省略

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐