$(). Load() anstatt die ganze Seite zu laden, aber muss Menü auf allen Seiten

Question

Ich möchte auf den Inhaltsbereich meiner Website mit jQuery/AJAX $().load() Funktion neu laden. Aber mein Problem ist, dass die header und footer auf allen Seiten angezeigt werden müssen, unabhängig von Ihrer Eingabe-URL.

Meine Website ist mit Vorlagen erstellt, so war mein erster Gedanke, die Ausgabe des Layouts über und unter dem eindeutigen Inhalt zu entfernen, wie ich dann verhindern würde, dh. Das Menü wird zweimal angezeigt. Aber ich erkannte, dass, wenn der Benutzer meine Seite nicht über die erste Seite betritt, sagen wir index.php, er niemals Kopf- oder Fußzeilen sehen wird, sondern nur eine unstrukturierte Textseite.

Meine Frage ist, wie würdest du dieses Problem umgehen? JavaScript (+ jQuery) und HTML5 sind erlaubt.

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 

oder:

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

Weitere Informationen finden Sie im Abschnitt in der jQuery-Dokumentation auf load() and page fragments

Answer 2

Das t Die Technik, nach der Sie suchen, ist als Hijax bekannt, wo Sie die Antwort von einer AJAX-Anfrage abfangen und nur den Teil des DOM herausziehen, den Sie auf der gerenderten Seite ersetzen wollen.

Die allgemeine Idee ist, dass die tatsächlichen URLs selbst immer noch den vollständigen Seiteninhalt zurückgeben. Wenn also die Anfrage von einem neuen Besucher kommt, wird das gesamte DOM geladen, aber wenn die Anfrage vom Benutzer kommt, klickt ein Hijaxed Wenn Sie auf Ihrer Seite einen CSS-Selektor angeben, wird nur der Teil der Seite ersetzt, der durch den Selektor identifiziert wurde.

Werfen Sie einen Blick auf Hijax - jQuery Plugin. Die eigentliche Website selbst wird mithilfe des Plug-Ins erstellt. Wenn Sie Ihre Netzwerkregisterkarte ansehen und den Inspektor in Ihren Chrome- oder Firebug-Tools anzeigen, können Sie den Inhalt austauschen, ohne die Menüs, die Kopfzeile oder andere Elemente zu ersetzen werden nicht ersetzt.

Answer 3

Es scheint, als ob Sie ein paar verschiedene Optionen haben könnten. Wenn ein Benutzer Ihre Website besucht, aber nicht zur ersten Seite geht, können Sie einfach überprüfen, ob die Kopf- und Fußzeile angezeigt werden, nachdem die Seite geladen wurde. Wenn sie nicht gefunden werden, sollte das ursprüngliche Site-Layout erstellt werden. Sie könnten sogar entscheiden, die erste Seite (index.php) auf diese Weise zu bauen, so dass jede Seite würde

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

Es gibt keine Zweifel zu anderen Lösungen die gleiche Art und Weise behandelt werden, die Sie auch unterhalten können; Sie könnten wahrscheinlich ein Include auf jeder Seite haben, das nur einbezogen wird, wenn die Seite über eine GET- statt einer AJAX-Anfrage angefordert wird.