Tiles框架：只刷新主体内容

Question

我们有头，菜单，正文和页脚一个瓷砖布局页面。在此布局中，无论用户在菜单列表中执行了一些操作，整个布局（包含页眉，菜单和页脚）都会刷新。我想要标题，菜单，页脚是静态的，只有正文部分应该更新。

有什么办法来防止标题，菜单和页脚的刷新和更新菜单点击可使用瓷砖实施仅主体内容？

Answer 1

要做到这一点，你需要使用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将取代你的主体内容，请记住，这个JSP只能包含body元素。比方说，你有其他2项正文内容准备在您的网页上显示，每个人将是一个瓷砖：

<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方法，返回包含你的身体的JSP。你可以创建用于每个体内容或其中包含的方法为每个body.Second选项是清洁器的单个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加载到您的正文中。这是该方法的一个例子将切换jQuery中的内容，使用.load（）的Ajax调用：

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

不要被答案是多久，我只是想劝阻干净地解释。这实际上很容易做到，问题是比其他任何东西都更关注jquery/javascript，唯一的细节是如何将struts动作用作服务。祝你好运。

Answer 2

我不喜欢的Th0rndike和像一个魅力的工作。我正在使用春天，有点不同，但有相同的想法。

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

使用的文件的瓷砖Spring文档的默认配置layouts.xml添加超越现有模板，新模板，这将是负责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> 

在文件视图。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请求的控制器;