在Eclipse中开发基于DWR的AJAX的Web应用Struts3.docx
《在Eclipse中开发基于DWR的AJAX的Web应用Struts3.docx》由会员分享，可在线阅读，更多相关《在Eclipse中开发基于DWR的AJAX的Web应用Struts3.docx（20页珍藏版）》请在冰豆网上搜索。
在Eclipse中开发基于DWR的AJAX的Web应用Struts3
在Eclipse中开发基于DWR的AJAX的Web应用（3）
在设计数据库查询页面时，下拉菜单是经常使用的元素。
很多时候你会希望选择了下拉菜单的一项后，相应的另一下拉菜单的内容会随之改变。
这种功能可以通过刷新页面来实现，但界面显得不那么友好。
在本文介绍例子中，不需要刷新页面便可达到目的。
当在下拉菜单中选择了一个省份后，另一下拉菜单会出现该省份的一些城市供选择。
下面另外DWR实现“用户名称的实时校验”和“关联的选择框”的表单。
1、在项目中再添加一个业务接口
（1）提供一个接口CityManageInterface，包名称为com.px1987.dwrexampl.model
（2）在该接口中提供下面的方法定义
packagecom.px1987.dwrexampl.model;
importjava.util.*;
publicinterfaceCityManageInterface
{
publicbooleancheckUserNameValid（StringuserName）;
publicHashMapgetCityNameInfo（StringprivanceName）;
}
2、为该接口提供一个实现类
（1）类名称为CityManageBean，包名称为com.px1987.dwrexampl.model
（2）编程该类
该类中的checkUserNameValid方法实现对用户名称进行检查，而getCityNameInfo方法主要是实现根据“省名称”获得其对应的“城市名称”。
packagecom.px1987.dwrexampl.model;
importjava.util.HashMap;
publicclassCityManageBeanimplementsCityManageInterface
{
publicCityManageBean（）
{
//TODO自动生成构造函数存根
}
publicbooleancheckUserNameValid（StringuserName）
{
booleanokOrNot=false;
if（userName.equals（"yang"））//实际应该改变为对数据库系统的访问
{
okOrNot=true;
}
else
{
okOrNot=false;
}
returnokOrNot;
}
publicHashMapgetCityNameInfo（StringprivanceName）
{//实际应该改变为对数据库系统的访问
HashMapcityNameHashMap=newHashMap（）;
if（privanceName.equals（"beijing"））
{
cityNameHashMap.put（"海淀","海淀"）;
cityNameHashMap.put（"朝阳","朝阳"）;
cityNameHashMap.put（"西城","西城"）;
cityNameHashMap.put（"东城","东城"）;
}
elseif（privanceName.equals（"hebei"））
{
cityNameHashMap.put（"石家庄","石家庄"）;
cityNameHashMap.put（"邯郸","邯郸"）;
cityNameHashMap.put（"保定","保定"）;
cityNameHashMap.put（"衡水","衡水"）;
}
elseif（privanceName.equals（"henan"））
{
cityNameHashMap.put（"郑州","郑州"）;
cityNameHashMap.put（"驻马店","驻马店"）;
cityNameHashMap.put（"郑州1","郑州1"）;
cityNameHashMap.put（"郑州2","郑州2"）;
}
elseif（privanceName.equals（"jiangxi"））
{
cityNameHashMap.put（"南昌","南昌"）;
cityNameHashMap.put（"九江","九江"）;
cityNameHashMap.put（"景德镇","景德镇"）;
cityNameHashMap.put（"吉安","吉安"）;
}
returncityNameHashMap;
}
}
3、将该JavaBean部署为远程JavaBean以便能够在页面中访问它
（1）在我们的dwr-timeBean.xml文件中添加对它的配置项目
xmlversion="1.0"encoding="UTF-8"?
>
DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN""http:
//www.getahead.ltd.uk/dwr/dwr10.dtd">
（2）编译该项目并再次部署本项目，在浏览器中查看其*.js文件名称：
输入http:
//localhost:
8080/DWRWebTest/dwr/index.html
然后点击上面的“cityManageBean”的超链接，将出现下面的内容
从而获得在页面中对该JavaBean进行远程引用时的*.js文件名称
（3）也可以对我们的业务组件中的方法在线测试
●对checkUserNameValid方法在线测试
●对getCityNameInfo方法在线测试
与代码中的实际返回的值保持一致。
3、在本项目中添加一个页面
（1）名称为dwrForm.jsp
（2）在该页面中添加一个表单
<%@pagelanguage="java"pageEncoding="gb2312"%>
<%@tagliburi="http:
//struts.apache.org/tags-bean"prefix="bean"%>
<%@tagliburi="http:
//struts.apache.org/tags-html"prefix="html"%>
<%@tagliburi="http:
//struts.apache.org/tags-logic"prefix="logic"%>
<%@tagliburi="http:
//struts.apache.org/tags-tiles"prefix="tiles"%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
htmllang="true">
base/>
dwrForm.jsp
--
-->
formaction="/dwrForm.do"method="post">
您的用户名称：
textproperty="userName"onblur="checkUserName（this.value）"/>
|
| 请选择所希望的省名称： selectproperty="privanceName"onchange="changCityName（options[selectedIndex].value）;"> optionvalue="beijing">北京
option> optionvalue="hebei">河北
option> optionvalue="henan">河南
option> optionvalue="jiangxi">江西
option>
select> | 该省的主要城市名称： selectproperty="cityName"> optionvalue="海淀">海淀
option> optionvalue="朝阳">朝阳
option> optionvalue="西城">西城
option> optionvalue="东城">东城
option>
select> |
|
form>
html>
（3）再在该页面中对DWR的JavaScript和我们的业务组件的JavaScipt函数库进行引用
<%
StringwebContext=request.getContextPath（）;
%>
（4）最后的完整的页面内容为下面的状态
<%@pagelanguage="java"pageEncoding="gb2312"%>
<%@tagliburi="http:
//struts.apache.org/tags-bean"prefix="bean"%>
<%@tagliburi="http:
//struts.apache.org/tags-html"prefix="html"%>
<%@tagliburi="http:
//struts.apache.org/tags-logic"prefix="logic"%>
<%@tagliburi="http:
//struts.apache.org/tags-tiles"prefix="tiles"%>
<%
StringwebContext=request.getContextPath（）;
%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
htmllang="true">
base/>
dwrForm.jsp
--
-->
formaction="/dwrForm.do"method="post">
您的用户名称：
textproperty="userName"onblur="checkUserName（this.value）"/>
|
| 请选择所希望的省名称： selectproperty="privanceName"onchange="changCityName（options[selectedIndex].value）;"> optionvalue="beijing">北京
option> optionvalue="hebei">河北
option> optionvalue="henan">河南
option> optionvalue="jiangxi">江西
option>
select> | 该省的主要城市名称： selectproperty="cityName"> optionvalue="海淀">海淀
option> optionvalue="朝阳">朝阳
option> optionvalue="西城">西城
option> optionvalue="东城">东城
option>
select> |
|
form>
html>
4、在我们的webapp.js文件中添加changCityName和checkUserName的JavaScript函数
functionchangCityName（privanceName）
{
cityManageBean.getCityNameInfo（privanceName,cityNameCallBackFun）;
}
cityNameCallBackFun=function（returnCityNameHashMap）
{
DWRUtil.removeAllOptions（"cityName"）;
DWRUtil.addOptions（'cityName',returnCityNameHashMap）;
}
functioncheckUserName（inputedUserName）
{
cityManageBean.checkUserNameValid（inputedUserName,checkUserNameCallBackFun）;
}
checkUserNameCallBackFun=function（returnCheckUserName）
{
if（!
returnCheckUserName）
{
//alert（"您输入的用户名称"+document.getElementById（"userName"）.value+"不正确"）;
alert（"您输入的用户名称"+$（"userName"）.value+"不正确"）;
$（"userName"）.focus（）;
}
returnreturnCheckUserName;
}
5、添加ActionForm
dwrActionForm，com.px1987.dwrexampl.actionform.DWRActionForm
6、添加Action类
com.px1987.dwrexampl.action.DWRFormAction、/dwrForm，org.apache.struts.action.Action
编程该Action类的代码
packagecom.px1987.dwrexampl.action;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importorg.apache.struts.action.Action;
importorg.apache.struts.action.ActionForm;
importorg.apache.struts.action.ActionForward;
importorg.apache.struts.action.ActionMapping;
importcom.px1987.dwrexampl.actionform.DWRActionForm;
publicclassDWRFormActionextendsAction
{
publicActionForwardexecute（ActionMappingmapping,ActionFormform,
HttpServletRequestrequest,HttpServletResponseresponse）{
DWRActionFormdwrActionForm=（DWRActionForm）form;
/*
*在此实现真正的查询功能
*/
returnmapping.findForward（"searchSuccess"）;
}
}
7、添加SearchSuccess.jsp
<%@pagelanguage="java"pageEncoding="gb2312"%>
<%@tagliburi="http:
//struts.apache.org/tags-bean"prefix="bean"%>
<%@tagliburi="http:
//struts.apache.org/tags-html"prefix="html"%>
<%@tagliburi="http:
//struts.apache.org/tags-logic"prefix="logic"%>
<%@tagliburi="http:
//struts.apache.org/tags-tiles"prefix="tiles"%>
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
htmllang="true">
base/>
SearchSuccess.jsp
升级会员 