Inhalte per Ajax (jQuery) nachladen
Von: Jonas In diesem Beitrag findet ihr den JavaScript-Code um externe HTML-Dokumente nachzuladen.
Wenn Website-Inhalte nachgeladen oder verändert werden ohne dass die Website dazu vollständig neu geladen werden muss spricht man von Ajax (Asynchronous JavaScript and XML). Meist wird Ajax mit komplexen Funktionen oder Formularabfragen in Verbindung gebracht, es macht es aber auch in eher einfachen Projekten Sinn nicht direkt benötigte Inhalte per Ajax nachzuladen und somit die Performance zu verbessern. In diesem Beitrag archiviere ich ein kleines jQuery-Snippet mit dessen Hilfe HTML-Inhalte per Klick nachgeladen werden können.
HTML-Aufbau
Das Beispiel ist denkbar simpel aufgebaut. In der Datei ajax.html befindet sich ein div mit der ID target. In diesen Bereich werden später die Inhalte geladen. Zusätzlich wurde ein Button platziert der über onclick="kb_source_2_target()" bereits auf die JavaScript-Funktion kb_source_2_target verweist.
ajax.html
...
<body>
<h1>Inhalte per Ajax (jQuery) nachladen</h1>
<div id="target"></div>
<button onclick="kb_source_2_target()">Hier klicken</button>
</body>
...Die zweite Datei source.html beinhaltet nur den HTML-Code, der später in den div geladen werden soll. In diesem Beispiel einen einzelnen Satz ohne Markup.
jQuery & Ajax
Nun folgt der jQuery und JavaScript (Ajax)-Code. In der Datei ajax.html wird zunächst jQuery eingebunden. Anschließend schreiben wir die Funktion, um per Klick auf den Button die Inhalte aus der Datei source.html auszulesen und in den div mit der ID target zu laden.
<script src="jquery.js" type="text/javascript"></script>
<script>
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data);
})
}
</script>Hinweis für lokale Testumgebungen
Aufgrund der Sicherheitseinstellungen von JavaScript funktioniert dieses Beispiel nur auf einem Live-Server. Wenn ihr mehr dazu wisst oder das Beispiel für lokale Umgebungen anpassen könnt bin ich euch sehr dankbar. Ihr könnt euch das Beispiel hier online anschauen.
Demo und Download
Der Vollständigkeit halber zeige ich hier noch einmal den kompletten Code inkl. einiger zusätzlicher HTML- und CSS-Angaben. Ihr könnt die Beispieldateien auch herunterladen.
ajax.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Inhalte per Ajax nachladen</title>
<style type="text/css">
div {
border: 1px solid #ccc;
padding: 25px;
}
</style>
</head>
<body>
<h1>Inhalte per Ajax (jQuery) nachladen</h1>
<div id="target"> Die Inhalte in diesem Container werden nach dem Klick auf den Button mit den Inhalten aus der Datei <code>source.html</code> überschrieben. </div>
<p>
<button onclick="kb_source_2_target()">Hier klicken</button>
</p>
<script src="jquery.js" type="text/javascript"></script>
<script>
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data);
})
}
</script>
</body>
</html>source.html
Inhalte geladen! Rock n Roll!
Nutzt doch heute JQuery nicht mehr und schon gar nicht für so eine einfache Sache wie das Nachladen von Daten. Das geht viel einfacher, schlanker und ohne externe Bibliothek:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first
prima Lösung, sowas habe ich gesucht.
Frage: wie kann ich den Button entfernen, wenn der content aus der html Datei geladen ist?
Ich habe die Anzeige beim Nachladen inzwischen ohne pleaseWait() gelöst:
– Ein anim. Icon das ich per ajaxStart und ajaxStop ein/ausschalte
– Ein Übergang den ich per jQuery.fadeIn und fadeOut durchführe
Codeeingabe klappt leider nicht, wie kann ich hier den Code eingeben ohne dass er zerstört wird?
Noch mal den Code, der wurde irgendwie eliminiert:
start // funktioniert
start // funktioniert nicht!!!
startFunction() {
$(‚#test‘).pleaseWait();
}
Inzwischen habe ich herausgefunden, wann pleaseWait() funktioniert und wann nicht:
start // funktioniert
start // funktioniert nicht!!!
startFunction() {
$(‚#test‘).pleaseWait();
}
Hat jemand eine Idee warum es nicht funktioniert wenn es in einer Funktion steht? Wenn ich es fürs Nachladen per Ajax verwende, geht es leider nur in einer Funktion.
Ich möchte eine größere Anzahl Fotos in Tranchen anzeigen, das Nachladen soll aber nicht per Button erfolgen, sondern durch Runterscrollen wenn man in die Nähe des Seitenendes kommt.
Wie könnte man das anstossen?
Hallo Franz, wie dein Anwendungsfall umgesetzt werden kann, ist abhängig von zahlreichen Rahmenbedingungen – z.B. dem CMS etc. Wir können deine Frage daher nicht pauschal bzw. im Rahmen dieses Blogs beantworten. Sorry.
Hallo Jonas,
meine Page ist händisch erstellt mit HTML, CSS und JS. Die Datenm werden per PHP aus einer DB geladen. Das autom. Nachladen habe ich inzwischen mit JS+Ajax gelöst:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
var faktor = 300;
if ($(window).scrollTop() >= ($(document).height() – $(window).height() – faktor)) {
$(‚body‘).pleaseWait();
getMore();
$(‚body‘).pleaseWait(’stop‘);
}
}
function getMore() {
$.get(‚getMore4.php‘, function(data) {
document.getElementById(‚more‘).outerHTML = data;
})
}
Ich hätte aber gerne noch während dem Nachladevorgang eine animierte Anzeige, die ev. auch die Seite dabei blockiert. Dazu habe ich im Netz die Funktion pleaseWait() gefunden, die ich aber nicht zum Laufen bekomme, die Animation wird einfach nicht angezeigt. Weiß jemand wie ich die implementiere?
Hallo,
gibt es inzwischen eine Lösung für lokale Umgebungen, also wenn es nicht über einen Live-Sever läuft?
Das wäre toll.
Oder etwas alternatives?
Danke für Tips.
Du kannst lokal z.B. mit MAMP einen Server einrichten und dann lokal testen.
Danke für die Anleitung – sehr verständlich und praxixnah :-)
Ich habe eine Frage, die etwas weiterführt. Im js_skript werden die von source.html kommenden Daten ja in data gespeichert und direkt im div mit der id „target“ gespeichert:
$(‚#target‘).html(data);
Ich versuche gerade, data an eine globale Variable zu übergeben und dann außerhalb der Funktion weiterzuverwenden. Damit möchte ich diese Variable von Seitenaufruf zu Seitenaufruf in einer externen Datei zwischenspeichern. Funtioniert leider noch nicht.
Geht so etwas prinzipiell:
var globale_variable;
$.get(’source.html‘, function(data) {
globale_variable = data;
})
// Mache irgendetwas mit globale_variable
Gruß Jo
Hallo Jo, das klingt fast als wäre ein Cookie für dich das Mittel der Wahl. Wir haben hier eine Testdatei ableget – allerdings ohne detaillierte Erklärung, da uns dazu im Moment die Zeit fehlt.
Hallo, danke fürs Veröffentlichen dieser Anleitung und des Scripts. Ich habe versucht, es für mein geplantes Vorhaben etwas umzubauen, bin aber leider zu keiner 100%igen Lösung gekommen. Evtl. können Sie mir weiterhelfen. Ich möchte über verschiedene Links unterschiedliche Anzahlen von nachzuladenden Seiten übermitteln, damit diese dann entsprechend angezeigt werden. Hier das grobe Script dafür:
Hier Klicken
function kb_source_2_target(liste) {
var dieEintrage = liste.split(„,“);
var zielfelder = [‚#zf1‘, ‚#zf2‘, ‚#zf3‘, ‚#zf4‘, ‚#zf5‘];
for (var i = 0; i < dieEintrage.length; i++) {
$.get(dieEintrage[i], function(data) {
$(zielfelder[i]).html(data);
});
}
}
Es funktioniert leider nicht. eintrag_1.html bis eintrag_3.html werden nacheinander geladen, aber alle im Zielfeld zf4. Wo liegt der Fehler?
Schönen Gruß
Uwe
Hallo,
prima Aneitung, genau das was ich gesucht habe.
In den Absatz 2HTML-Aufbau! hat sich, glaube ich, ein kleiner Fehler eingeschlichen: „In der Datei ajax.html befindet sich ein div mit der ID container. In diesen Bereich werden später die Inhalte geladen. “
Wenn man sich den darunterstehenden Code anschaut hat das entsprechende div die Bezeichnung „target“ (stat „container“ im zitierten Absatz.).
Wenn ich alles richtig verstanden habe :-)
Hallo Uli, vielen Dank für den Hinweis. Der Artikel ist entsprechend geändert.
Perfect, genau das habe ich gesucht, um nur einen Teil meiner Seite zu updaten.
Jedoch habe ich noch ein kleines Problem mit meinem Menü das ich ebenso aktualisieren möchte. Jedoch habe ich noch keine Lösung hierfür gefunden.
div id=’menu1′>
Home
Config
Die id=’aktuell‘ soll beim Klick auf Config auch auf von Home auf Config wechseln.
Hat jemand eine Idee?
Danke
Hallo
gibt es auch eine möglichkeit das mann die nachgeladenen Daten in eine Variable speichert und dann im script verwendet?
Bräuchte es bei den google charts um die daten nachzuladen…
ESP8266 Webserver kann die Daten nicht alle auf einmal senden. Muss die Daten dann nach geladener Seite nachladen…
Mit freundlichen Grüßen
Thomas
Die Frage wurde weiter oben schon (ähnlich) gestellt (ohne Antwort).
Ich suche eine Lösung mit mehreren / vielen nachladbaren Seiten, um eine Website ohne PHP zu erstellen. Eine mit CSS gestaltete Seite kann ich bereits nachladen. Die Zieldatei im Script zu wechseln, gelingt mir leider (noch) nicht.
Danke für den Tipp.
Dietmar
Ich scheitere gerade am Versuch folgendes zu realisieren:
Es soll eine Ladeanimation geladen werden und dann sofort dargestellt, um während des darstellen den Rest der Seite zu laden. Wie bekomme ich es nun hin, dass der rest der Seite automatisch und sofort geladen wird?
Freundliche grüsse aus der CH
Danke für das Tutorial,
einfach und leicht verständlich.
Viele Grüße Peter
Hallo, wie sieht es mit SEO und dem nachladen von Inhalten aus? Hat Google mittlerweile auch Ajax gelernt? Ich habe so etwas gelesen. Welche Voraussetzungen müssen erfüllt sein, das Google den Inhalt indiziert?
Viele Grüße
Michael
Gibt es auch eine Möglichkeit den Inhalt von google zu indexieren zu lassen, aber die source.html Seite für google nicht indexierbar zu machen?
klar; in der robots.txt das da eintragen:
User-agent: *
Disallow: /source.html
Hallo, ich bin zwar in HTML und CSS relativ gut, hab aber leider Defizite in Javascript, trotzdem informiere ich mich zur Zeit über Conditional Loading, zur Performanceverbesserungen meiner Responsiven Webseiten auf dem Handy.
Mit dem Beschriebenen Skript kann man ja externe HTML-Fetzen sehr gut nachträglich laden. Gibt es auch eine Möglichkeit Scripts und Snippets durch so einen „Nachladelink“ zum laufen bringen?
Ich benutze ab und an den Layerslider, der bekanntlich relativ groß ist. Nehmen wir mal an ich will den nur aufm Desktop geladen bekommen und aufm Handy nur nach Klick. Geht das auch damit oder brauch ich dafür was anderes?
Hast du einen Tipp, wie man sowas lösen kann? Ich hab schon einiges ausprobiert ich bin am verzweifeln.
Hallo,
funktioniert wunderbar für 1x nachladen.
Mein Problem:
Nachladen von z.B. „weiteren“ 9 Fotos (oder anderen Elementen) per „Nachladen“-Button, also manuelle Auslösung. Eine Schleife geht nicht, da diese mit dem Button unterbrochen wird.
Die Möglichkeit, andere Dateien nachzulagen, funktioniert – aber bei z.B. >1000 Fotos müsste ich bei 9 Fotos pro Nachladung über 100 Seiten programmieren ;-)
Gibt es da eine Lösung? … so viele Male nachzuladen (mit Button-Klick), wie Fotos da sind?
Gruß,
Petra
Gutes Script, funktioniert so erst mal richtig gut und ist auch für Dummis verständlich.
Eine Frage hab ich aber doch noch: Wie bekomme ich in dem nachgeladenen Bereich ein Formular zum Laufen?
Folgender Ansatz: Auf einer WEB-Site „fliegt“ mittel javascript nach einer Zeit „X“ ein Feld ein in welchem der User sich aussuchen kann ob er einen Rückruf möchte (dazu muss er seine Telefonnummer eingeben), eine Mail absenden möchte (typisches Mailformular) oder einfach so anrufen. Das Letzte ist kein Problem, aber für die ersten beiden bedarf es eines Formulars und das wird nicht abgesendet.
Grüße, Michel
Sorry,
das mit dem SPAN habe ich bereits gelöst, jetzt funktioniert das doch.
Aber das Problem: wie bekomme ich den Ursprungstext wieder zurück, bleibt noch bestehen.
lg
Schibi
@jonas Vielen Dank für die Super Anleitung.
ich konnte damit schon mal einen Teil meines Projektes realisieren, aber zwei Fragen kann ich einfah nicht lösen, vielleicht hast Du eine Idee.
1. ich habe das onMouseOver Event benutzt um den Inhalt nachzuladen (klappt super). kann ich mit Mouseout oder so ähnlich auch wieder den Ursprungs-Text anzeigen lassen ?
2. wie kann ich das Script abändern damit ich das „id target“ nicht auf einen Container, sondern auf eine benannte SPAN id=“target“ umlenenken kann.
Mein Gedanke ist der:
hier ist der erste Satz (dahinter soll nun eine der Inhalt der „source.html“ nachgeladen werden) am besten mit einem SPAN.
darunter habe ich noch weitere Sätze/Zeilen, wo ich dann jeweils die Datei source2, source3 usw. nachlade, jewieils wieder mit einer SPAN /allerdings dann mit einer anderen ID (taregt1, target2 ….)
Über einen Lösungsansatz würde ich mich freuen.
Danke für das Script. Genau das nachdem gesucht wurde :)
Gibt es auch eine Möglichkeit Daten aus einer MySql Datenbank zu laden?
Man kann mit der Funktion auch eine php-Datei aufrufen, die dann etwas aus der Datenbank ausliest und per return zurückgibt.
Falls nötig kann man beim Aufruf auch parameter übergeben:
$.post(‚dateiname.php‘, {parameter:value}, function(data){
//weitere Anweisungen
});