我们知道ajax可以做到局部刷新,请求之后,正常情况下,返回来json或者xml格式的数据,然后,利用javascript解析json或者xml的能力,将收到的数据进行分析,然后,根据分析出来的数据,利用jQuery动态替换DOM树的能力局部地刷新页面。这是最为常见的ajax使用的方式。
在Struts2环境下,有时候,考虑到便利性,使用ajax的方式会略有不同。在实际项目中,有时候会做局部页面块的整体替换。
html界面布局:
- <div class="contain">
- <!--左界面-->
- <div id="applist" class="left">
- </div>
- <div id="xxx" class="right">
- </div>
- </div>
当页面加载完成后,动态发起一次局部更新页面内容的请求:
- <script type="text/javascript">
- $(document).ready(function(){
- getLatestApks();
- });
- function getLatestApks(){
- $.ajax({
- url : "getLatestApks.action",
- method : "post",
- // 一系列其他你需要的参数(详见文档)
- success : function(dataFromServer) {
- // 处理服务端返回的数据dataFromServer
- $("#applist").html(dataFromServer);
- }
- });
- }
- </script>
action:getLatestApks.action的配置如下:
- <action name="getLatestApks" class="apkInfoQuery" method="getLatestApks">
- <result name="success">/apks.jsp</result>
- </action>
apks.jsp的内容:
- <%@page contentType="text/html" pageEncoding="UTF-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <%@taglib uri="/struts-tags" prefix="s"%>
- <link type="text/css" rel="stylesheet" media="screen" href="css/master.css">
- <div class="apptop">
- <div class="sides"><span class="fontset">最新测试App</span></div>
- <div class="sides"><span class="fontset" style="float:right">累计测试<s:property value="appCount" />次</span></div>
- </div>
- <div class="appbottom">
- <ul id="applist">
- <s:iterator value="latest8Apks" id="apk" status="st">
- <li><img src="<s:url value="%{#apk.appIconPath}"/>" width="100" height="100" /><div class="apktitle"><s:property value="#apk.appName"/></div></li>
- </s:iterator>
- </ul>
- </div>
这样,我们就能够利用ajax实现大块内容的整体替换,并且,这种方式最大的好处是可以使用Struts2的标签来处理迭代啊等复杂的内容展现。
这种使用方式蛮特别的,但有时确实是挺方便的。