Récupérer des données en jquery/ajax sur un site en PHP

Bonjour,

A la suite des tutos PHP et le tuto Lightbox, j'ai crée une galerie photos.
Aucun problème pour afficher toutes les images, pas de problème avec la Lightbox non plus, cependant dans la lightbox j'affiche uniquement la photo.
J'aimerais ajouter, par exemple, un titre et une description. Ces deux éléments sont déjà en BDD.
C'est la où je commence à avoir du mal. J'ai essayé d'utiliser jQuery et Ajax pour récupérer les informations de la photo que j'ouvre dans la Lightbox. A savoir que j'utilise AltoRouter comme router pour mon site, donc je me demande si cela ne pose pas un problème au niveau des urls pour la requete ajax.

Ce que je fais

buildDom qui permet de créer l'HTML de notre lightbox. J'ai pour l'instant juste ajouté une variable data pour récuperer mes données. Cette variable appelle la fonction getData qui est censé faire la requete ajax (ce trouve dans le fichier getData.php auquel j'accède via altoRouter).

buildDOM(url) {
        let data = this.getData(url)
        console.log(data)
        const dom = document.createElement('div')
        dom.classList.add('lightbox')
        dom.innerHTML = `<button class="lightbox__close">Fermer</button>
        <button class="lightbox__prev">Précédent</button>
        <button class="lightbox__next">Suivant</button>
        <div class="lightbox__container">
            <div class="description">
                <h2 class="title">Title</h2>
                <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos sint dolorem tempora maxime nam corrupti voluptate cum, laborum totam, nemo expedita culpa mollitia exercitationem reiciendis odit minus optio tempore sit.</p>
            </div>
        </div>`
        dom.querySelector('.lightbox__close').addEventListener('click', this.close.bind(this))
        dom.querySelector('.lightbox__next').addEventListener('click', this.next.bind(this))
        dom.querySelector('.lightbox__prev').addEventListener('click', this.prev.bind(this))
        return dom;
    }

getData(url) {
        $.ajax({
            url: "getData",
            type: "GET",
            data: "url=" + url.substr(4),
            dataType: "json",
            success: function(data, status) {
                return data
            }
        })
    }

getData.php :

use App\Connect;
use App\Table\PhotoTable;

$pdo = Connect::getPDO();
$photoTable = new PhotoTable($pdo);

if(isset($_GET['url'])){
    $url = $_GET['url'];
    $photo = $photoTable->find($photoTable->findField('path', $url));
    $data = [
        'title' => $photo->getTitle(), 
        'text' => $photo->getText()
    ];
    echo json_encode($data);
}

Ici je récupère bien les informations que je souhaite renvoyer. Quand je regarde dans le devtool de chrome, dans Network, je vois bien ma requete getData?url="image.jpeg" et quand je clique dessus cela m'affiche mon layout avec le resultat du echo json_encode($data);.

La route que j'utilise pour accéder à getData.php:
(mon fichier routes)

    $router
    ->get('/', '/galerie/index', 'home')
    ->match('/add_photos', '/galerie/add', 'add_photos')
    ->get('/getData', '/galerie/getData', 'getData')
    ->run();

Ce que je veux

Je souhaite obtenir les informations de getData.php dans mon javascript de la Lightbox.

Ce que j'obtiens

Actuellement, quand je log ma variable data qui est censé avoir les informations via getData je n'obtiens rien, le log retourne undefined.

Je me demande donc pourquoi je n'obtiens rien. Est-ce dû au routing via altoRouter ? ou est-ce que j'utilise mal Ajax ?