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請求的控制器;