Struts2中使用Ajax
本文主要看一下Struts2中的Div是如何用来输出Ajax结果。
首先，我们先创建一个简单的用例，在这个用例中，将在屏幕上显示一个用户列表，点击列表中的userid时，列表的下方将显示用户的详细信息，显示用户详细信息的这个步骤我们将使用Ajax。
一、创建web.xml
Xml代码收藏代码
<?xmlversion="1.0"encoding="UTF-8"?>
<web-appversion="2.5"xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
二、创建struts.xml
Xml代码收藏代码
<!DOCTYPEstrutsPUBLIC
"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<packagename="ajaxdemo"extends="struts-default">
<actionname="UserListingAction"class="ajaxdemo.action.UserListingAction">
<result>/userlisting.jsp</result>
</action>
<actionname="UserDetailAction"class="ajaxdemo.action.UserDetailAction">
<result>/userdetail.jsp</result>
</action>
</package>
</struts>
三、页面：userlisting.jsp
Displayslistofusers
Html代码收藏代码
<%@taglibprefix="s"uri="/struts-tags"%>
<html>
<head>
<s:headtheme="ajax"/>
</head>
<script>
functionshow_user_details(id){
document.frm_user.userid.value=id;
dojo.event.topic.publish("show_detail");
}
</script>
<body>
<s:formid="frm_user"name="frm_user">
<h1>UserListing</h1>
<s:iftest="userList.size>0">
<tableborder="1">
<s:iteratorvalue="userList">
<tr>
<td>
<s:ahref="#"onclick="javascript:show_user_details('%{id}');returnfalse;"><s:propertyvalue="id"/></s:a>
</td>
<td>
<s:propertyvalue="name"/>
</td>
</tr>
</s:iterator>
</table>
</s:if>
<s:hiddenname="userid"/>
<s:urlid="d_url"action="UserDetailAction"/>
<s:divid="user_details"href="%{d_url}"theme="ajax"listenTopics="show_detail"formid="frm_user">
</s:div>
</s:form>
</body>
</html>
四、页面：userdetail.jsp，用于显示用户详细信息，由userlisting.jsp加载
Html代码收藏代码
<%@taglibprefix="s"uri="/struts-tags"%>
<h1>UserDetails</h1>
<s:iftest="userDetails!=null">
<table>
<tr><td>Id:</td><td><s:propertyvalue="userDetails.id"/></td></tr>
<tr><td>Name:</td><td><s:propertyvalue="userDetails.name"/></td></tr>
<tr><td>Email:</td><td><s:propertyvalue="userDetails.email"/></td></tr>
<tr><td>Address:</td><td><s:propertyvalue="userDetails.address"/></td></tr>
</table>
</s:if>
五、ajaxdemo.action.UserListingAction.java，生成用户列表数据，交由userlisting.jsp显示，在实际的应用中，这部分的数据一般是从数据库中取得的。
Java代码收藏代码
packageajaxdemo.action;
importajaxdemo.dto.UserListDTO;
importcom.opensymphony.xwork2.ActionSupport;
importjava.util.ArrayList;
importjava.util.List;
/***//**Populatestheuserlistingdata*/
publicclassUserListingActionextendsActionSupport{
privateList<UserListDTO>userList;//thisisavailableinviewautomatically!
publicStringexecute()throwsException{
//create2userobjectsandaddtoalist
setUserList((List<UserListDTO>)newArrayList());
UserListDTOuser=newUserListDTO();
user.setId("gjose");
user.setName("GraceJoseph");
getUserList().add(user);
user=newUserListDTO();
user.setId("peter");
user.setName("PeterSmith");
getUserList().add(user);
returnSUCCESS;
}
publicList<UserListDTO>getUserList(){
returnuserList;
}
publicvoidsetUserList(List<UserListDTO>userList){
this.userList=userList;
}
}
六、ajaxdemo.action.UserDetailAction.java，当userid被选中时，取得用户详细数据，通过dojo来调用。
Java代码收藏代码
packageajaxdemo.action;
importajaxdemo.dto.UserDetailDTO;
importcom.opensymphony.xwork2.ActionSupport;
/**//*Populatesuserdetailsforauseridselected*/
publicclassUserDetailActionextendsActionSupport{
privateStringuserid;
privateUserDetailDTOuserDetails;
publicStringexecute()throwsException{
//populateonlywhenuseridisselected
if(userid!=null&&!userid.equals(""))
populateDetail(userid);
returnSUCCESS;
}
privatevoidpopulateDetail(Stringid){
userDetails=newUserDetailDTO();
userDetails.setId(id);
userDetails.setName("TheCompleteName");
userDetails.setEmail("[email protected]");
userDetails.setAddress("richstreet,lavishroad,StrutsLand");
}
publicStringgetUserid(){
returnuserid;
}
publicvoidsetUserid(Stringuserid){
this.userid=userid;
}
publicUserDetailDTOgetUserDetails(){
returnuserDetails;
}
publicvoidsetUserDetails(UserDetailDTOuserDetails){
this.userDetails=userDetails;
}
}
七、ajaxdemo.action.UserDetailDTO.java、POJO，用于封装用户信息
Java代码收藏代码
packageajaxdemo.dto;
publicclassUserDetailDTO{
privateStringid;
privateStringname;
privateStringemail;
privateStringaddress;
publicStringgetId(){
returnid;
}
publicvoidsetId(Stringid){
this.id=id;
}
publicStringgetName(){
returnname;
}
publicvoidsetName(Stringname){
this.name=name;
}
publicStringgetEmail(){
returnemail;
}
publicvoidsetEmail(Stringemail){
this.email=email;
}
publicStringgetAddress(){
returnaddress;
}
publicvoidsetAddress(Stringaddress){
this.address=address;
}
}
OK，部署完毕后，输入http://localhost:8080/ajaxdemo/UserListingAction.action来测试一下。
当列表中的userid被点中后，javaScript通知Div标签从URL中动态加载返回内容。这个例子中，UserDetailAction取得用户信息并传递给userdetail.jsp。userdetail.jsp生成最终的展示结果，显示在Div中。
相关推荐
结束数据方法的参数，该如何定义？-- 集合为自定义实体类中的结合属性，有几个实体类，改变下标就行了。<input id="add" type="button" value="新增visitor&quo