jQuery: Dynamic Content mit Ajax Loader

Auf vielen Webseiten auf der viele Informationen geladen werden müssen hat man häufig das Problem die Informationen möglichst übersichtlich und schnell auf eine Seite zu bekommen. Dieses ist meist auch mit einem Refresh der kompletten Seite verbunden. Das JavaScript Framework jQuery bietet hierfür einige nette Ajax Funktionen mit denen die Daten einfach nachgeladen und ohne Refresh in die Seite eingefügt werden können, hier spricht man häufig von dynamic Content bzw. dynamischen Content der via Ajax Loader nachgeladen wird.

Zu Anfang benötigen Sie ein Grundgerüst mit einem Button und einem leeren div-Container indem die Daten reingeladen werden können. Desweiteren müssen Sie noch einen Verweis auf jQuery machen und eine kleine Funktion einfügen mit die Daten aus einer php-Datei ausgelesen werden können.

  

    %MINIFYHTMLcfcff7fa5fc50ffce39e05d28ec3f2d73%%MINIFYHTMLcfcff7fa5fc50ffce39e05d28ec3f2d74%
  


    

  

Mit der Funktion GetContent können Sie einen Parameter (id) mitgeben die Sie dann anschließend in PHP via $_GET auswerten können. Desweiteren wird in der Funktion bestimmt wo der neue Content reingeladen werden soll, hierfür wird der leere div-Container mit dem Namen content verwendet. Das PHP Skript getData.php stellt die Daten zur Verfügung, entweder sind die Informationen im PHP-Skript vorhanden oder werden optional aus einer Datenbank gelesen, dort gibt es keine Grenzen. Als nächsten benötigen Sie das PHP-Skript. Um das Beispiel möglichst einfach zu halten wird hier eine einfache switch case Anweisung verwendet in der die GET Variable id geprüft wird und je nach Wert ein anderer Content angezeigt wird.

Das Ganze können Sie hier schon in Echtzeit sehen. DEMO ANSEHEN
Download jQuery Ajax Loader