Ajax Requests mit JQuery
Dienstag, 16. Dezember 2008Manchmal ist es von Vorteil bei Klick auf einem Link nicht die gesamte Seite neu laden zu lassen, sondern lediglich einen Teil der Seite (z.B. ein einzelner <div> - Container).
Genau für solche Fälle gibt es in JQuery die einfache und nützliche Funktion load().
Die Einbindung in die eigene Homepage ist denkbar einfach. Man lade sich die aktuelle Version von JQuery runter und binde diese im Header ein.
Nun kommen wir bereits zum Link. Diesem können wir ein "onclick"-Ereignis mit folgendem Wert geben:
onclick="javascipt: $('#content').load('seite.html');"
Was passiert hier?
Nun ja zunächst weisen wir mit $('#content') JQuery an im nachfolgenden Befehl den Dvi-Container mit der ID 'content' zu benutzen. Im nächsten Schritt binden wir bereits unsere externe Datei ein.
Es muss sich nicht zwangsläufig um eine HTML-Datei handeln, sollen allerdings Parameter übergeben werden so empfielht sich die Funktion jquery.ajax().
Ich habe die load Funktion im Header noch etwas bearbeitet um ein fade-effekt zu realisieren:
$.function loadPage(output, href){ $(output).fadeOut(200); $(output).load(href); $(output).fadeIn(200); };
Jetzt wird der Inhalt etwas schöner bearbeitet.