4

我们有一个包含 Header、Menu、Body 和 Footer 的 Tiles 布局页面。在此布局中，每当用户在菜单列表中执行某些操作时，整个布局（包括页眉、菜单和页脚）都会刷新。我希望页眉、菜单、页脚是静态的，并且只有正文部分应该更新。

有什么方法可以防止刷新页眉、菜单和页脚，并且只更新菜单单击上的正文内容，这可以使用 Tiles 实现？

4

2 回答 2

7

为此，您需要使用 ajax 调用。一般程序是：

1.- 创建并定义一个作为基础的图块，由页眉、正文和页脚组成，如下所示：

<div id='headerTile'>whatever goes here...</div> <!--this is baseHeader.jsp-->
<div id='bodyTile'>whatever goes here....</div>  <!--this is baseBody.jsp-->
<div id='footerTile'>whatever goes here...</div>  <!--this is baseFooter.jsp-->

让我们将这些 div 中的每一个视为您定义中的一个图块：

<definition name="layoutBase" path="/whateverPathItIs/layoutBase.jsp">
    <put name="header" value="/whateverPathItIs/baseHeader.jsp"/>
<put name="body" value="/whateverPathItIs/baseBody.jsp" />
<put name="footer" value="/whateverPathItIs/baseFooter.jsp" />         
</definition>

2.-创建和定义所有不同的jsp来替换你的body内容，请记住这个jsp必须只包含body元素。假设您有 2 个其他正文内容准备显示在您的页面中，每个内容都是一个 tile：

<div id='bodyContent1'>whatever goes here again...</div> <!--this is content1.jsp-->

<div id='bodyContent2'>whatever goes here again 2</div> <!--this is content2.jsp-->

3.-此时，您拥有基础 jsp 平铺和 2 个包含正文内容的其他 jsp。现在我们需要一个作为服务的 struts 动作，根据 ajax 请求返回相应的主体。将此作为正常操作，并在最后的 mapping.findForward 方法中返回包含您的 body 的 jsp。您可以为每个正文内容创建一个操作，也可以为每个正文创建一个包含方法的单个 DispatchAction。第二个选项更简洁，并且该操作将定义如下：

<action path="/bodySwitcher" 
        type="BodySwitcherAction"
        parameter="method"
        scope="request"
        >
    <forward name="content1" path="/pathToJsp/content1.jsp"/>
    <forward name="content2" path="/pathToJsp/content2.jsp"/>
</action>

4.-要切换内容，使用javascript或jquery进行ajax调用并将返回的jsp加载到你的body中。这是在 jQuery 中切换内容的方法的示例，使用 .load() 作为 ajax 调用：

function switchContent(whichContent){
     $('#bodyTile').children().remove();
     $('#bodyTile').load("/pathToYourApp/bodySwitcher.do?method="+whichContent);
}

不要因为答案有多长而气馁，我只是想解释清楚。这实际上很容易做到，并且与 jquery/javascript 相关的问题比其他任何问题都多，唯一的细节是如何将 struts 操作用作服务。祝你好运。

于 2012-06-15T10:03:39.220 回答
1

我确实喜欢 Th0rndike，而且工作起来很迷人。我正在使用弹簧，有点不同，但想法相同。

在我的配置中，使用tiles来解决仅使用视图，我无法直接使用jsp文件进行新主体的转发，例如使用path =“/pathToJsp/content1.jsp”。

在 layouts.xml 文件中使用 spring 文档的默认配置添加到现有模板之外，新模板将负责在每次发出 Ajax 请求时包含新主体。

<definition name="bodySwitcher" template="/WEB-INF/layouts/bodySwitcher.jspx">
<put-attribute name="bodyContent" value="" />
</ Definition>

将模板文件设置为：

<div xmlns: jsp = "http://java.sun.com/JSP/Page"
xmlns: c = "http://java.sun.com/jsp/jstl/core"
xmlns: tiles = "http://tiles.apache.org/tags-tiles"
xmlns: spring = "http://www.springframework.org/tags"
xmlns: util = "urn: jsptagdir :/ WEB-INF/tags/util" id = "bodySwitcher"
version = "2.0">

<tiles:insertAttribute name="bodyContent" />

</div>

在文件 views.xml 中，为每个加载页面新正文的链接设置内容，特别是：

<definition name="link1" extends="bodySwitcher">
<put-attribute name="bodyContent" value="/WEB-INF/views/link1.jspx" />
</ Definition>

<definition name="aboutus" extends="bodySwitcher">
<put-attribute name="bodyContent" value="/WEB-INF/views/aboutus.jspx" />
</ Definition>

Ajax请求可以在主模板中进行：

$ (Document). ready (function () {

$ ('. PageAction'). click (function (e) {
LoadPage (e)
});

function LoadPage (e) {
e.preventDefault ();
console.log (e)
console.log (e.currentTarget.pathname);
$ ('# BodySwitcher'). children (). remove ();
$ ('# BodySwitcher'.) Load ("bodySwitcher? Method =" + e.currentTarget.pathname);
}

});

ajax请求可以使用bodySwitcher的参数方法中指定的转发到视图的控制器来处理。返回转发字符串，如“forward:”+link1，转发给处理link1请求的控制器；

于 2013-08-12T04:21:27.290 回答