ajax框架DWR簡單應用

最近需要做個下拉列框二級聯動功能，之前所做都是使用jquery-ajax請求後臺數據json格式填充select列表，現在使用dwr實現此功能。

就以簡單的省市爲例：

1.jsp頁面：

<td id="p" class="fontleft" style="display:none">省:</td>
	  	<td id="pT" class="fontright" style="display:none">
	  		<select name="remark0" οnchange="subcity();">
	  		<option value="">全選</option>
	  			<s:iterator value="provinceList">
	  				<option value="<s:property value="%{province}"/>" ><s:property value="%{province}"/></option>
	  			</s:iterator>
	  		</select>
	  	</td>
	  	<td id="c" class="fontleft" style="display:none">市:</td>
	  	<td id="cT" class="fontright" style="display:none">
	  		<select name="remark1">
	  		<option value="">全選</option>
	  			<s:iterator value="cityList">
	  				<option value="<s:property value="%{city}"/>" ><s:property value="%{city}"/></option>
	  			</s:iterator>
	  		</select>
	  	</td>

其中struts2標籤得到的proviceList,cityList都是在action通過session得到的列表:

private List proviceList;		//省列表
	private List cityList;			//市列表

	public List getProviceList() {
		return proviceList;
	}

	public void setProviceList(List proviceList) {
		this.proviceList = proviceList;
	}

	public List getCityList() {
		return cityList;
	}

	public void setCityList(List cityList) {
		this.cityList = cityList;
	}

	/**
	 * 省市查詢
	 * @return
	 */
	public String proviceCityQuery(){
		Map map = ServletActionContext.getContext().getSession();
		proviceList = (List) map.get("proviceList");
		cityList = (List) map.get("cityList");
		return "success";
	}

onchange事件：

<!-- DWRActionUtil.js在提供的jar包中，需要將其從jar包中導出並放到web工程中 -->
		<script type="text/javascript" src="../js/DWRActionUtil.js"></script>
		<!-- DWRAction.js是自動生成的 -->
		<script type='text/javascript' src="<%=request.getContextPath()%>/dwr/interface/DWRAction.js"></script>
		<!-- engine.js,util.js在jar包中，自動引入的 -->
		<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/util.js"></script>
		<script language="javascript">
		function subcity()
			{
			DWRActionUtil.execute({
			namespace:'/CITY',
			action:'cityAction',
			executeResult:'false',
			method:'getSubcitys'},'cityform', callbackchangeback);		
			}
			function callbackchangeback(data)
			{
			  var cityju=data.ju;
			  DWRUtil.removeAllOptions("remark1");
			  var vm=document.getElementsByName('remark1')[0];
  			  vm.add(new Option("全選"," "));
			  DWRUtil.addOptions("remark1",cityju);
			  
			}
		</script>

其中getSubcity爲action中方法名稱，cityform爲表單id名，ju爲一個Map。

2.web.xml中配置dwr：

 <servlet>
    <servlet-name>dwr</servlet-name>
    <!-- org.directwebremoting.spring.DwrSpringServlet -->
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
  </servlet>
  (或者：
  <servlet>
    <servlet-name>dwr</servlet-name>
    <display-name>DWR Servlet</display-name>
    <description>Direct Web Remoter Servlet</description>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
    <init-param>
      <param-name>scriptCompressed</param-name>
      <param-value>false</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  )

  <servlet-mapping>
    <servlet-name>dwr</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

3.dwr.xml配置文件:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC  "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>  
    <allow>  
    	<create creator="none" javascript="DWRAction">
  			<param name="class" value="org.directwebremoting.struts2.DWRAction"/>
		</create>
		<convert converter="bean" match="org.directwebremoting.struts2.ActionDefinition">
		  <param name="include" value="namespace,action,method,executeResult" />
		</convert>
		<convert converter="bean" match="org.directwebremoting.struts2.AjaxResult"/>
    	<!-- 相應的Struts2的Action -->
		<convert match="com.ssh2.action.CityAction" converter="bean"/>    
    </allow>
</dwr>