TYPO3: AJAX Schnittstelle in Extbase Extension einrichten

Pagereloads sind OUT! Immer mehr Funktionen auf Webseiten laufen ohne Reloads und zwar mit AJAX. Allerdings braucht man dafür natürlich auch in TYPO3 entsprechende Schnittstellen um Daten abzufragen oder Informationen zu überfragen. In diesem Artikel möchte ich euch ein Beispiel vorstellen, wie ihr in einer Extbase Extension eine AJAX Schnittstelle einrichtet.

Zunächst einmal gehen wir davon aus, dass unsere Extbase Extension über ein Plugin mit dem Namen „meinajax“ verfügt, welches wir via Typoscript mit tt_content.list.20.extkey_meinajax an jeder beliebigen Stelle einbinden können.

Da wir für unsere AJAX API eine Seite ohne Schnick Schnack brauchen, richten wir nun per Typoscript eine Seite mit einer typeNum ein, auf der unser Plugin eingebunden wird.

ajax_api = PAGE
ajax_api {
  typeNum = 6666
  config {
    disableAllHeaderCode = 1
    xhtml_cleaning = 0
    admPanel = 0
    additionalHeaders = Content-type: text/plain
    no_cache = 1
    debug = 0
  }

  10 < tt_content.list.20.extkey_meinajax
}

Als nächstes muss unser Plugin „meinajax“ natürlich auch über einen Controller verfügen. In diesem Controller können verschiedenste Actions liegen, die wir später per GET Parameter beliebig aufrufen können. Die Controller und Action die an unser Plugin „meinajax“ gebunden sind, werden ganz normal ála Extbase in der ext_localconf.php festgelegt.

Die Actions in unserem Controller verfügen ganz normal über Views, in denen wir beliebige Daten verarbeiten können. In meinem Beispiel heißt der Controller einfach mal Ajax und in der Datei unter typo3conf/ext/extkey/Classes/Controller/AjaxController.php könnte zum Beispiel folgende Funktion stehen:

public function gibMirWasAction() {
		$this -> view -> assign('irgendwas',$irgendwas);		
		return trim($this->view->render());
}

Die Action könnte mit return alles mögliche ans Frontend zurückgeben – eurer Fantasie sind keine Grenzen gesetzt.

Am Ende können wir dann unter folgender URL unsere Beispiel-AJAX-Schnittstelle und Funktion aufrufen:

http://meineSeite.de/index.php?type=6666&tx_extkey_meinajax[controller]=Ajax&tx_extkey_meinajax[action]=gibMirWas

In manchen TYPO3 System scheint das schreiben von tx_ für unsere Extension nicht nötig und sogar falsch zu sein! Sollte es zu Problemen kommen, versucht es bitte auch in folgendem Format:

http://meineSeite.de/index.php?type=6666&extkey_meinajax[controller]=Ajax&extkey_meinajax[action]=gibMirWas

8 Kommentare

  • Pingback: TYPO3: Eine Extbase Extension per Typoscript einbinden | Web Dev Log

  • Hallo,

    vielen Dank für die Darstellung. Es wäre echt toll, wenn Du noch in einem pragmatischen Beispiel darstellen könntest, wie man das nun für eine konkrete Query anwendet?

    Vielen Dank,
    Stefan

  • Vielen Dank, ist das die einzige Lösung?

    Gibt es keine Möglichkeit auf dieses Typoscript zu verzichten und die Response direkt in der Controller Action dementsprechen einzustellen?

    Folgender Fall: Formular für Model A mit zusätzlichem Formular mit Model B, das mittels AJAX 1:n Datensätze erzeugt und diese dem Model A hinzufügt. Funktioniert soweit auch, jedoch sobald ich mittels json_encode(daten des Model B) zurückgebe mittels return erhalte ich HTML.

    Und hier greift diese gängige Typoscript Lösung nicht, hänge ich dieses obskure typeNum als parameter &type=6666 an die action des Formulars für Model B so erhalte ich beim Aufruf ein 404.

  • Hallo Sam und Danke für dein Feedback.

    Man könnte eine Extbase Action auch auf einer eID Seite einbetten oder eine komplett leere Seite im TYPO3 System anlegen und dort ein Plugin platzieren. Per eID ist es allerdings ziemlich kompliziert noch irgendwie ein Frontend zu emulieren.

    Könntest Du dein Problem ein wenig konkretisieren? Also beim Erstellen der Unterobjekte rufst Du bereits eine typeNum Seite auf und es funktioniert abgesehen von der Rückgabe von json_encode? Bist Du Dir sicher, dass Du die tyeNum Seite richtig eingerichtet hast und hast Du mal alle Caches geleert? Du kannst mich auch gerne via Skype kontaktieren unter teamgeist_medien_pab

  • Hi,

    irgendwie klappt das nicht bei mir :(. Ich verwende TYPO3 6.2.15 und habe eine kleine Extension erstellt und versucht deine Anleitung nachzuvollziehen, aber ich bekomme einfach keine Ausgabe :(.

    setup.txt:
    plugin.tx_example {…}

    obj.ajaxPrototype = PAGE
    obj.ajaxPrototype {…}

    ajaxCallTest < obj.ajaxPrototype
    ajaxCallTest {
    typeNum = 1234
    5 = TEXT
    5.value = Hello Lisa
    }

    ajaxCall < obj.ajaxPrototype
    ajaxCall {
    typeNum = 6666
    10 < tt_content.list.20.tx_example_p1
    }

    Mit dieser Konfiguration sollte es ja nun eigentlich funktionieren, wenn ich den ersten typenum ausführe, erhalte ich auch das gewünschte „Hello Lisa“ :). Also habe ich versucht nun eine controller action auszuführen, zunächst der controller:

    Controller:

    class ExampleController extends ActionController {


    public function listAction() {
    return ‚Hello Lisa‘;
    }

    }

    Wenn ich nun das Plug-In auf einer Seite einbinde erhalte ich die Ausgabe ‚Hello Lisa‘, also gibt es mit dem Plug-In an sich auch keine Probleme :).

    Nun habe ich versucht die controller action mittels ober erwähnten typenum auszuführen, erhalte allerdings keine Ausgabe :(. Versucht habe ich dabei folgende Urls:

    1. http://localhost/index.php?type=6666&tx_example_p1%5Bcontroller%5D=Example&tx_example_p1%5Baction%5D=list
    2. http://localhost/index.php?type=6666&example_p1[controller]=Example&example_p1[action]=list

    Bei beiden Urls erhalte ich eine weiße Seite ohne Inhalt. Gibt es eine Möglichkeit zu überprüfen, ob 10 < tt_content.list.20.tx_example_p1 funktioniert?

    • Es funktioniert nun :).

      ajaxCall < obj.ajaxPrototype
      ajaxCall {
      typeNum = 6666
      10 < tt_content.list.20.example_p1
      }

      Hier einfach das „tx_“ weglassen und ebenso dann beim Aufruf durch die Url:
      ?type=6666&example_p1[controller]=Example&example_p1[action]=list

  • Hallo Lisa,

    zunächst würde ich Dir empfehlen im Installtool unter „Configuration Presets“ auf „Development Modus“ zu stellen um eventuelle PHP Fehler angezeigt zu bekommen.

    Woher hast Du den Pfad tt_content.list.20.tx_example_p1? (Wieso eigentlich nicht pi1?) Hast Du mal im Typoscript Objekt Browser geguckt ob der Pfad zu diesem Plugin so korrekt ist?

    Wenn alles richtig eingebunden ist und die listAction die Standard-Action des Controllers ist (siehe ext_localconf.php) müsste die Ausgabe bereits unter http://localhost/index.php?type=6666 ohne weitere GET Parameter erfolgen.

    Ich kann mir das auch gerne mal angucken, unter Skype einfach teamgeist_medien_pab

Schreibe einen Kommentar zu Lisa Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Highlighting von Codes ist mit den Tags  [ts], [php], [html], [javascript], [xml] oder [code] möglich.