Struts2中使用Ajax

最新推荐文章于 2021-08-06 01:58:26 发布

最新推荐文章于 2021-08-06 01:58:26 发布 · 237 阅读

文章标签：

#Ajax #Struts #JSP #Java #Dojo

ssh 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用 Struts2 的 Div 标签实现 Ajax 功能，通过点击用户 ID 加载并显示用户详细信息。

本文主要看一下Struts2中的Div是如何用来输出Ajax结果。

首先，我们先创建一个简单的用例，在这个用例中，将在屏幕上显示一个用户列表，点击列表中的userid时，列表的下方将显示用户的详细信息，显示用户详细信息的这个步骤我们将使用Ajax。

一、创建web.xml


<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="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/javaee http://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


<!DOCTYPE struts PUBLIC 
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
    "http://struts.apache.org/dtds/struts-2.0.dtd"> 
<struts> 
    <package name="ajaxdemo" extends="struts-default"> 
        <action name="UserListingAction" class="ajaxdemo.action.UserListingAction"> 
            <result>/userlisting.jsp</result> 
        </action> 
        <action name="UserDetailAction" class="ajaxdemo.action.UserDetailAction"> 
            <result>/userdetail.jsp</result> 
        </action> 
    </package> 
</struts>

三、页面：userlisting.jsp
Displays list of users


<%@ taglib prefix="s" uri="/struts-tags" %> 
<html> 
  <head> 
    <s:head theme="ajax"/> 

  </head> 
  <script> 
    function show_user_details(id) { 
      document.frm_user.userid.value = id; 
      dojo.event.topic.publish("show_detail"); 
    } 
  </script> 
  <body> 
    <s:form id="frm_user" name="frm_user"> 
      <h1>User Listing</h1> 
      <s:if test="userList.size > 0"> 
        <table border="1"> 
          <s:iterator value="userList"> 
            <tr> 
              <td> 
                <s:a href="#" onclick="javascript:show_user_details('%{id}');return false;"><s:property value="id" /></s:a> 
              </td> 
              <td> 
                <s:property value="name" /> 
              </td> 
            </tr> 
          </s:iterator> 
        </table> 
      </s:if> 
      <s:hidden name="userid"/> 
      <s:url id="d_url" action="UserDetailAction" /> 
      <s:div  id="user_details" href="%{d_url}" theme="ajax" listenTopics="show_detail" formId="frm_user" > 
      </s:div> 
    </s:form> 
  </body> 
</html>

四、页面：userdetail.jsp，用于显示用户详细信息，由userlisting.jsp加载


<%@ taglib prefix="s" uri="/struts-tags" %> 
<h1>User Details</h1> 
<s:if test="userDetails != null"> 
    <table> 
      <tr><td>Id:</td><td><s:property value="userDetails.id" /></td></tr> 
      <tr><td>Name:</td><td><s:property value="userDetails.name" /></td></tr> 
      <tr><td>Email:</td><td><s:property value="userDetails.email" /></td></tr> 
      <tr><td>Address:</td><td><s:property value="userDetails.address" /></td></tr> 
    </table> 
</s:if>

五、ajaxdemo.action.UserListingAction.java，生成用户列表数据，交由userlisting.jsp显示，在实际的应用中，这部分的数据一般是从数据库中取得的。


package ajaxdemo.action; 

import ajaxdemo.dto.UserListDTO; 
import com.opensymphony.xwork2.ActionSupport; 
import java.util.ArrayList; 
import java.util.List; 

/** *//** Populates the user listing data */ 
public class UserListingAction extends ActionSupport { 

    private List<UserListDTO> userList; // this is available in view automatically! 
    public String execute() throws Exception { 

        // create 2 user objects and add to a list 
        setUserList((List<UserListDTO>) new ArrayList()); 
        UserListDTO user = new UserListDTO(); 
        user.setId("gjose"); 
        user.setName("Grace Joseph"); 
        getUserList().add(user); 

        user = new UserListDTO(); 
        user.setId("peter"); 
        user.setName("PeterSmith"); 
        getUserList().add(user); 
        return SUCCESS; 
    } 

    public List<UserListDTO> getUserList() { 
        return userList; 
    } 

    public void setUserList(List<UserListDTO> userList) { 
        this.userList = userList; 
    } 
}

六、ajaxdemo.action.UserDetailAction.java，当userid被选中时，取得用户详细数据，通过dojo来调用。


package ajaxdemo.action; 

import ajaxdemo.dto.UserDetailDTO; 
import com.opensymphony.xwork2.ActionSupport; 

/**//* Populates user details for a user id selected */ 
public class UserDetailAction extends ActionSupport { 

    private String userid; 
    private UserDetailDTO userDetails; 

    public String execute() throws Exception { 
        // populate only when userid is selected 
        if(userid!=null && !userid.equals("")) 
            populateDetail(userid); 
        return SUCCESS; 
    } 

    private void populateDetail(String id) { 
        userDetails = new UserDetailDTO(); 
        userDetails.setId(id); 
        userDetails.setName("The Complete Name"); 
        userDetails.setEmail("admin@struts2.org"); 
        userDetails.setAddress("rich street, lavish road, Struts Land"); 
    } 

    public String getUserid() { 
        return userid; 
    } 

    public void setUserid(String userid) { 
        this.userid = userid; 
    } 

    public UserDetailDTO getUserDetails() { 
        return userDetails; 
    } 

    public void setUserDetails(UserDetailDTO userDetails) { 
        this.userDetails = userDetails; 
    } 

}

七、ajaxdemo.action.UserDetailDTO.java、POJO，用于封装用户信息


package ajaxdemo.dto; 

public class UserDetailDTO { 

    private String id; 
    private String name; 
    private String email; 
    private String address; 

    public String getId() { 
        return id; 
    } 

    public void setId(String id) { 
        this.id = id; 
    } 

    public String getName() { 
        return name; 
    } 

    public void setName(String name) { 
        this.name = name; 
    } 

    public String getEmail() { 
        return email; 
    } 

    public void setEmail(String email) { 
        this.email = email; 
    } 

    public String getAddress() { 
        return address; 
    } 

    public void setAddress(String address) { 
        this.address = address; 
    } 
}

OK，部署完毕后，输入http://localhost:8080/ajaxdemo/UserListingAction.action来测试一下。
当列表中的userid被点中后，javaScript通知Div标签从URL中动态加载返回内容。这个例子中，UserDetailAction取得用户信息并传递给userdetail.jsp。userdetail.jsp生成最终的展示结果，显示在Div中。