TYPO3 async http request examples

Example 1

TYPO3 Script or extension to fetch async data from a text/image content element with the ID:1045 and display the fluid's content.

# /Configuration/TypoScript/setup.typoscript
lib.contentElement = CONTENT
lib.contentElement {
    table = tt_content
    select {
        where = colPos = 0 AND uid = 1045 # Fetch content element with ID 1045
    }
    renderObj = FLUIDTEMPLATE
    renderObj {
        file = EXT:your_extension/Resources/Private/Templates/ShowAsyncContent.html
    }
}

Fluid Template
Resources/Private/Templates/ShowAsyncContent.html

<div id="async-content"></div>
<script>
   fetch('/index.php?id=1&type=123&no_cache=1')
       .then(response => response.text())
       .then(data => {
           document.getElementById('async-content').innerHTML = data;
       });
</script>

<f:format.raw>{f:cObject(typoscriptObjectPath:'lib.contentElement')}</f:format.raw>

Example 2

Async request to fetch text/image content element with the uid 1000 in TYPO3 11 using Extbase, Fluid, and Typoscript,

File / folder structure:

- Classes
    - Controller
        - ContentController.php
- Configuration
    - TypoScript
        - setup.txt
- Resources
    - Private
        - Templates
            - Content
                - show.html
    - Public
        - JavaScript
            - custom.js

ContentController.php

namespace Vendor\CustomContentElement\Controller;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Extbase\Mvc\Controller\ActionController;
class ContentController extends ActionController
{
    public function showAction()
    {
        $uid = 1000; // Your content element UID
        $contentElement = GeneralUtility::makeInstance(\TYPO3\CMS\Frontend\ContentObject\ContentObjectRenderer::class)->cObjGetSingle('RECORDS', [
            'tables' => 'tt_content',
            'source' => $uid,
        ]);
        $this->view->assign('contentElement', $contentElement);
    }
}

setup.txt
Typoscript

plugin.tx_customcontentelement {
    view {
        templateRootPaths {
            0 = EXT:custom_content_element/Resources/Private/Templates/
        }
    }
}

show.html
Fluid template

<f:format.raw>{contentElement}</f:format.raw>

custom.js

fetch('/index.php?id=1&type=1306257038&tx_customcontentelement_content[action]=show&tx_customcontentelement_content[controller]=Content&tx_customcontentelement_content[uid]=1000')
    .then(response => response.text())
    .then(data => {
        // Handle the response data as needed
        console.log(data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

page setup typoscript

page = PAGE
page {
    includeCSS {
        custom = EXT:custom_content_element/Resources/Public/Styles/custom.css
    }
    includeJS {
        custom = EXT:custom_content_element/Resources/Public/JavaScript/custom.js
    }
    10 = USER
    10 {
        userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
        extensionName = CustomContentElement
        pluginName = Pi1
        vendorName = Vendor
        controller = Content
        action = show
    }
}

Example 3

Using javascript link ID, output as JSON

Fluid template
your-template.html

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:layout name="Default" />
<f:section name="Main">
    <h1>Data Loading Example</h1>
    <button id="getData">Fetch Data</button>
    <div id="dataContainer"></div>
</f:section>

setup ( typoscript )

page = PAGE
page {
    typeNum = 0
    10 = FLUIDTEMPLATE
    10 {
        file = EXT:your_extension/Resources/Private/Templates/YourTemplate.html
    }
    ajax = PAGE
    ajax {
        typeNum = 100
        config {
            disableAllHeaderCode = 1
            xhtml_cleaning = 0
            admPanel = 0
        }
        10 < page.10
    }
}

php - controller class

class AjaxController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController
{
    public function fetchDataAction()
    {
        $id = $this->request->getArgument('id');
        // Fetch data based on the provided ID
        // Prepare the data to be returned as JSON
        $data = [
            'id' => $id,
            'name' => 'John Doe',
            'age' => 30
        ];
        $this->response->setBody(json_encode($data));
        $this->response->send();
    }
}

Javascript

document.getElementById('getData').addEventListener('click', function() {
    const id = 123; // Your individual ID
    const url = 'index.php?type=100&tx_your_extension_extension[controller]=Ajax&tx_your_extension_extension[action]=fetchData&id=' + id;

    fetch(url)
    .then(response => response.json())
    .then(data => {
        document.getElementById('dataContainer').innerHTML = 'Name: ' + data.name + '
Age: ' + data.age;
    });
});