$(). Load() zamiast ładowania całej strony, ale trzeba zachować menu na wszystkich stronach

Question

Chcę przeładować zawartość obszaru mojej witryny za pomocą funkcji jQuery/AJAX $().load(). Ale moim problemem jest to, że header i footer musi być wyświetlany na wszystkich stronach, niezależnie od adresu URL wpisu.

Moja strona jest budowana przy użyciu szablonów, więc moją pierwszą myślą było usunięcie wyjścia z układu nad i pod unikatową zawartością, ponieważ wtedy uniemożliwiłbym np. menu zostanie wyświetlone dwukrotnie. Ale zdałem sobie sprawę, że jeśli użytkownik nie wejdzie na moją stronę przez pierwszą stronę, powiedzmy index.php, nigdy nie zobaczy nagłówka ani stopki tylko niezindy lowanej strony tekstowej.

Moje pytanie brzmi: jak byś poradził sobie z tym problemem? JavaScript (+ jQuery) i HTML5 są dozwolone.

Answer 1

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 

czyli

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

Aby uzyskać więcej informacji, zobacz sekcję w dokumentacji jQuery na load() and page fragments

Answer 2

The t echnique, którego szukasz, jest znane jako Hijax, gdzie przechwytujesz odpowiedź z żądania AJAX i wyciągasz tylko część DOM, którą chcesz zamienić na renderowanej stronie.

Ogólna zasada jest taka, że ​​same adresy URL będą nadal zwracać pełną treść strony, więc jeśli żądanie pochodzi od nowego użytkownika, cały DOM zostanie załadowany, ale jeśli żądanie pochodzi od użytkownika, który kliknął w hidżi link na twojej stronie z określonym selektorem CSS, a następnie zastępowana jest tylko część strony określona przez selektor.

Spójrz na Hijax - jQuery Plugin. Rzeczywista witryna jest zbudowana przy użyciu wtyczki. Jeśli oglądasz kartę sieci i patrzysz na inspektora w narzędziach Chrome lub Firebug, możesz zobaczyć, że zawartość jest zamieniana bez zastępowania menu, nagłówka lub innych elementów, które nie są zastępowane.

Answer 3

Wygląda na to, że możesz mieć kilka różnych opcji. Jeśli użytkownik odwiedza Twoją witrynę, ale nie idzie na pierwszą stronę, możesz po prostu sprawdzić, czy nagłówek i stopki są wyświetlane po załadowaniu strony. Jeśli nie zostaną znalezione, należy utworzyć początkowy układ witryny. Można nawet zdecydować się na budowę pierwszej strony (index.php) w ​​ten sposób, aby każda strona będzie obsługiwane w ten sam sposób

$(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 
    } 
}); 

Nie ma wątpliwości, że inne rozwiązania można bawić tak dobrze; Prawdopodobnie na każdej stronie można umieścić element uwzględniany tylko wtedy, gdy strona jest żądana za pomocą polecenia GET, a nie żądania AJAX.