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

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

因为是用spring管理了struts2和hibernate,所以我们只要把spring与dwr整合就行了。


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

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

这是我的dwr.xml配置

<?xml version="1.0" encoding="UTF-8"?>  
<!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-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>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代码也贴出来


//dwr二级联动
 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方法省略

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。