我们知道ajax可以做到局部刷新,请求之后,正常情况下,返回来json或者xml格式的数据,然后,利用javascript解析json或者xml的能力,将收到的数据进行分析,然后,根据分析出来的数据,利用jQuery动态替换DOM树的能力局部地刷新页面。这是最为常见的ajax使用的方式。

    在Struts2环境下,有时候,考虑到便利性,使用ajax的方式会略有不同。在实际项目中,有时候会做局部页面块的整体替换。

html界面布局:

  1. <div class="contain"> 
  2.     <!--左界面--> 
  3.     <div id="applist" class="left"> 
  4.          
  5.     </div>
  6. <div id="xxx" class="right"> 
  7.     
  8. </div>
  9.  </div>

当页面加载完成后,动态发起一次局部更新页面内容的请求:

  1. <script type="text/javascript"> 
  2. $(document).ready(function(){ 
  3.     getLatestApks(); 
  4. }); 
  5.  
  6. function getLatestApks(){ 
  7.     $.ajax({ 
  8.         url : "getLatestApks.action", 
  9.         method : "post", 
  10.         // 一系列其他你需要的参数(详见文档) 
  11.         success : function(dataFromServer) { 
  12.             // 处理服务端返回的数据dataFromServer
  13.             $("#applist").html(dataFromServer); 
  14.         } 
  15.     }); 
  16. </script> 

action:getLatestApks.action的配置如下:

  1. <action name="getLatestApks" class="apkInfoQuery" method="getLatestApks"> 
  2.     <result name="success">/apks.jsp</result> 
  3. </action> 

apks.jsp的内容:

 

  1. <%@page contentType="text/html" pageEncoding="UTF-8"%> 
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  3.    "http://www.w3.org/TR/html4/loose.dtd"> 
  4. <%@taglib uri="/struts-tags" prefix="s"%> 
  5. <link type="text/css" rel="stylesheet" media="screen" href="css/master.css"> 
  6.  
  7. <div class="apptop">  
  8.           <div class="sides"><span class="fontset">最新测试App</span></div> 
  9.           <div class="sides"><span class="fontset" style="float:right">累计测试<s:property value="appCount" /></span></div> 
  10. </div> 
  11. <div class="appbottom"> 
  12.     <ul id="applist"> 
  13.         <s:iterator value="latest8Apks" id="apk" status="st"> 
  14.                 <li><img src="<s:url value="%{#apk.appIconPath}"/>width="100" height="100"  /><div class="apktitle"><s:property  value="#apk.appName"/></div></li> 
  15.         </s:iterator> 
  16.     </ul> 
  17. </div> 

这样,我们就能够利用ajax实现大块内容的整体替换,并且,这种方式最大的好处是可以使用Struts2的标签来处理迭代啊等复杂的内容展现。

这种使用方式蛮特别的,但有时确实是挺方便的。