Typo3 Ajax request with pagetype

Fetching data via ajax from your typo3 website frontend can be done with an eid script or a custom typoscript page object targeted with it’s own pagetype. The latter is explained in this post.

Both ways of doing ajax request in Typo3 have pros and cons. The eid hook interferes relatively early in the page rendering process, having the consequence that there is no TSFE available for example. I personally prefer the pagetype way, because I have all the possibilities that I have in a normal rendered page.

Using the pagetype way basically a new page object “PAGE” is created in the typoscript setup that has a custom pagetype to access it. This page object returns your custom plugin returning the desired data. A special value is set in typoscript to remove all header data, because we only want to have ajax data (html or json usually)

setup.txt

ajaxContent = PAGE
ajaxContent {
    typeNum = 476

    # add plugin
    10 < tt_content.list.20.contentautocomplete_content

    # disable header code
    config {
        disableAllHeaderCode = 1
        additionalHeaders = Content-type: application/json, utf-8

        xhtml_cleaning = 0
        admPanel = 0
        debug = 0
    }
}

javascript:

var pagetype = 'type=476',
    controller = 'tx_extensionname_pluginname[controller]=Content',
    action = 'tx_extensionname_pluginname[action]=list',
    search = 'tx_extensionname_pluginname[search]=' + val;

var request = $.ajax({
    url: '/?' + controller + '&' + action + '&' + pagetype + '&' + search,
    dataType: 'html'
});

request.done(function( msg ) {
    console.log(msg);
    $list.html(msg);
});

request.fail(function( jqXHR, textStatus ) {
    console.log( "Request failed: " + textStatus );
    $list.html('');
});

It’s important to adjust the values for extensionname and pluginname in the code above.