Как использовать PHP - AJAX с событием наведения мыши?

Question

У меня есть levelselector. php страница, где игроки могут выбрать один из уровней. Это прекрасно работает, но я хочу добавить дополнительную вещь. Таблица уровней показывает название уровня, сложность, количество завершителей (решено), и если фактический игрок завершил его.

Это таблица с уровнями

Вот что я хочу сделать с AJAX: если я наведу указатель мыши на ячейку, которая показывает, сколько игроков завершили карту, я хочу немного DIV , который следует за мышью , чтобы показать, кто является завершителями . У меня уже есть div, который появляется только когда игрок перемещается через «Решенную» ячейку, но я хочу заполнить этот «div» завершителями реальной карты. Эти завершители хранятся в базе данных, в которой все уровни хранятся со всеми их параметрами, в другом файле, это не имеет значения.

Это div, который я хочу заполнить с помощью фактические завершающие уровни

Я думал так: с помощью Javascript я получаю имя имени уровня, получая первые «TD» -ные внутренние HTML, и если бы я мог дать это * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *} *}} * * * * * * * * * * * * * * * * * * * *} *}}}} * * * * * * 10: * * *

function delegate(parent, selector, type, fn) {
    function delegatedFunction(event) {
        let handler = this;
        let target = event.target;

        const closest = target.closest(selector);
        if (handler.contains(closest)) {
            fn.call(closest, event);
        }
    }
    parent.addEventListener(type, delegatedFunction);
}

delegate($("table"), "td[id=completed]", "mouseover", showCompleters);
delegate($("table"), "td[id=completed]", "mouseout", hideCompleters);


async function showCompleters() {
    var cursorsdiv = document.getElementById("completers");
    cursorsdiv.style.visibility = "visible";

    var levelname = this.closest("tr").firstElementChild.innerHTML;

    const formData = new FormData();
    formData.set("name", levelname);

    const response = await fetch('levelselector.php', {
      method: "POST",
      body: formData
    });
    const data = await response;

    document.addEventListener('mousemove', function(e){
        var x = e.clientX;
        var y = e.clientY;
        cursorsdiv.style.left = x + 20 + 'px';
        cursorsdiv.style.top = y + 10 + "px";
    } )
}

function hideCompleters() {
    var cursorsdiv = document.getElementById("completers");
    cursorsdiv.style.visibility = "hidden";
}

.

(я использовал эту функцию-делегат для добавления каждой строки событий наведения таблицы)

А вот и levelselector. php * html часть таблицы:

<table id="levelsTable">
        <tr>
            <th>Level</th>
            <th>Difficulty</th>
            <th>Solved</th>
            <th>Completed by me</th>
        </tr>
        <?php foreach($levels as $level): ?>
        <tr id="level">
            <td id="levelname"><?= $level['level'] ?></td>
            <td><?= $level['difficulty'] ?></td>
            <td id="completed"><?= count($level['completed_by']) ?></td>
            <td><?php if(in_array($_SESSION['username'],$level['completed_by'])) {
                echo "Yes";
            } else {
                echo "No";
            } ?></td>
        </tr>
        <?php endforeach; ?>
</table>

    <div id="completers"><?= CONTENT WITH THE ACTUAL LEVEL'S COMPLETERS ?></div>

    <script src="./levels/script.js" type="text/javascript" charset="utf-8"></script>

Этот DIV с идентификатором «завершителей» будет div, который отображает завершители, в зависимости от того, на какой уровень вы наводите мышь.

А, а вот что я мог бы выяснить в PHP часть:

<?php

    $levels = load_file("levels.json");

    if($_POST) {
        $levelname = $_POST['name'];
    }else {
        $levelname = "";
    }
?>

Но, к сожалению, я не понимаю, как это AJAX горе rks.

Вопрос : Как правильно использовать AJAX в этом случае для заполнения DIV различным содержанием в каждой строке таблицы, если навести курсор мыши?

Надеюсь, вы поняли мой английский sh, спасибо за вашу помощь, спасибо !!!

Питер