kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Inhalte per Ajax (jQuery) nachladen

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

HTML-Aufbau

Das Beispiel ist denkbar simpel aufgebaut. In der Datei ajax.html befindet sich ein div mit der ID container. 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 container 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 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.

Download Beispieldateien

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!

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

15 Kommentare

  1. Mike

    Verfasst am 3. Mai 2014 um 0:24 Uhr.

    Gibt es auch eine Möglichkeit Daten aus einer MySql Datenbank zu laden?

    • Nikolaj

      Verfasst am 30. Mai 2014 um 12:25 Uhr.

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

  2. fred wasserstein

    Verfasst am 26. Juli 2014 um 1:01 Uhr.

    Danke für das Script. Genau das nachdem gesucht wurde :)

  3. Schibi

    Verfasst am 15. Oktober 2014 um 22:59 Uhr.

    @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.

  4. Schibi

    Verfasst am 15. Oktober 2014 um 23:03 Uhr.

    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

  5. Michel

    Verfasst am 13. Februar 2015 um 16:52 Uhr.

    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

  6. Petra

    Verfasst am 30. Juni 2015 um 9:33 Uhr.

    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

  7. Thomas Stutz

    Verfasst am 21. Mai 2016 um 22:39 Uhr.

    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.

  8. Patrick

    Verfasst am 1. August 2016 um 7:59 Uhr.

    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?

    • Christian

      Verfasst am 7. März 2017 um 16:37 Uhr.

      klar; in der robots.txt das da eintragen:

      User-agent: *
      Disallow: /source.html

  9. Michael Meixelsberger

    Verfasst am 27. Januar 2017 um 10:29 Uhr.

    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

  10. Peter Genzel

    Verfasst am 5. Mai 2017 um 12:39 Uhr.

    Danke für das Tutorial,
    einfach und leicht verständlich.
    Viele Grüße Peter

  11. Ryffel

    Verfasst am 16. Mai 2017 um 0:45 Uhr.

    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

  12. Dietmar

    Verfasst am 23. Juni 2017 um 10:58 Uhr.

    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

  13. Thomas

    Verfasst am 20. Oktober 2017 um 15:19 Uhr.

    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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.