$（）。load（）而不是加載整個頁面，但需要在所有頁面上保留菜單

我想用jQuery/AJAX $().load()函數重新加載我的網站內容區域。但我的問題是，無論您的輸入URL如何，都需要在所有頁面上顯示header和footer。

我的網站是使用模板構建的，所以我的第一個想法是刪除獨特內容上方和下方佈局的輸出，因爲我會阻止ie。菜單顯示兩次。但我意識到，如果用戶沒有通過第一頁進入我的網站，讓我們說index.php，他將永遠不會看到頁眉或頁腳只是一個無風格的文本頁面。

我的問題是，你將如何解決這個問題？ JavaScript（+ jQuery）和HTML5是允許的。

來源

2012-04-15 Emil

你用什麼語言爲你的後端？ PHP？ ColdFusion的？ AJAX加載的美妙之處在於，無論用戶登陸哪個頁面，他們都會在AJAX調用之前得到你放置的內容，所以你的頁眉，頁腳，菜單等已經在那裏了。如下所述，您可以將您的AJAX響應加載到頁面上的任何一個容器中。如果您在用戶點擊菜單時使用AJAX提取內容，則只需使用AJAX響應中的新內容替換容器中的html即可。 – Lazerblade 2012-04-15 22:37:50

Emil;你應該選擇哪個答案對你的解決方案是正確的，如果你找到了。否則，更新你的問題，如果有什麼改變。 – veeTrain 2012-04-18 17:56:33

我會做的，對不起。我沒有時間進一步調查答案，我試圖與jmort253一起工作，但遇到了一些錯誤（我將對此進行評論）。我的工作不幸過濾掉了與我的服務器的連接，所以當我在這裏時我沒有機會做任何事情。 – Emil 2012-04-19 09:13:09

page.php文件：

<div id="header"></di> 
<div id="mainContent"></div> 
<div id="footer"></div>

JS：

$("#content").load("page.php #mainContent"); //that will only load mainContent

或：

$.get('page.php', function (data) { 
    data = $(data).find('#mainContent').html(); 
    $("#content").empty().append(data); 
});

有關詳細信息，請參閱load() and page fragments

來源

2012-04-15 22:31:52 mgraph

我試過這個方法，但是似乎#mainContent被加載了兩次，因爲所有的頁面都包含了所有3個div。我想我需要抓住#mainContent的內容，但不知道如何做。 – Emil 2012-04-19 09:14:23

@Emil看到更新的安裝程序'$ .get ...' – mgraph 2012-04-19 11:31:47

謝謝，它似乎正在工作，但有些javascripts沒有正確加載。我將不得不稍後再看看。 – Emil 2012-04-19 15:08:00

jQuery的文檔中的節t您正在尋找的技術被稱爲Hijax，您可以攔截來自AJAX請求的響應，並僅將您打算在呈現的頁面上替換的DOM部分取出。

一般的想法是，實際的URL本身仍然會返回完整的頁面內容，所以如果請求來自一個新的訪問者，整個DOM將加載，但如果請求來自用戶點擊一個hijaxed將頁面上的鏈接與指定的CSS選擇器進行鏈接，然後僅替換由選擇器標識的頁面部分。

看一看Hijax - jQuery Plugin。實際網站本身是使用插件構建的，如果您在Chrome或Firebug工具中查看網絡選項卡並查看檢查器，則可以看到內容已被換出，而無需替換菜單，標題或其他元素沒有被替換。

來源

2012-04-15 22:35:27 jmort253

在這裏使用'$ .load（）'更清晰，更明智 - 正如mgraph在他的答案中暗示的那樣，只有頁面的一部分可以加載它。 – Bojangles 2012-04-15 22:42:14

同意，這就是爲什麼我編輯他的答案，包括一個鏈接到'加載'文件，也upvoted。對於一個Web應用程序，這是100％的路要走。但是，Hijax技術的優點是您的後退按鈕仍然有效。如果你正在建立一個網站，我懷疑你可能仍然希望你的後退按鈕工作，這樣行爲不會丟失。 – jmort253 2012-04-15 22:53:25

看起來你可能有幾個不同的選擇。如果用戶訪問您的網站但不去第一頁，那麼您可以檢查頁面加載後頁眉和頁腳是否顯示。如果找不到，則應該創建初始站點佈局。你甚至可以決定建立的第一頁（的index.php），這種方式使每一頁將被同樣的方式處理

$(document).ready(function() { 
    // If an element of id "header" isn't found in the DOM 
    if (!$("#header").length() > 0) { 
     // Generate the header and insert it as the first element of the DOM 
    } 
    if (!$("#footer").length() > 0) { 
     // Generate the footer and append it to the last element of the DOM 
    } 
});

有，你可以招待以及毫無疑問其他的解決方案;如果頁面是通過GET而不是AJAX請求請求的，那麼您可能在每個頁面上都包含一個只包含頁面的包含項。

來源

2012-04-15 22:42:29 veeTrain

$（）。load（）而不是加載整個頁面，但需要在所有頁面上保留菜單

回答

相關問題