Simple implementazione fetch scolastica

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header>
        <h1> Elenco Aereoporti </h1>
    </header>
    <br>
    <hr>
    <br>

    <ul id="airports"></ul>

    <script>
        (async () => {
            const result = await fetch('http://localhost/esempio%20form/print_airports.php');
            const data = await result.json();

            const airports = document.querySelector("#airports");
            console.log("TONNO", airports)
            for (const row of data) {
                airports.innerHTML += `
                    <li>
                        ID: ${row.id} <br>
                        Name: ${row.name} <br>
                        Code: ${row.code} <br>
                        Location: ${row.location} <br>
                    </li>
                <hr>
                `;
            }
        })();
    </script>

    <style>
        header {
            text-align: center;
        }

        header h1 {
            font-family: sans-serif;
        }

        ul li {
            list-style-type: none;
            margin: 10px;
        }
    </style>
</body>

</html>


<?php
    header("Content-Type:application/json");
    require_once('dbconnect.php');
    $query = "SELECT id, name, code, location FROM AEREOPORTO";

    if ($result = $mysqli->query($query)) {
        $data = $result->fetch_all(MYSQLI_ASSOC);

        echo json_encode($data);
    }


<?php
    require_once ('dbconnect.php');

    $id = $_POST['id'];
    $name = $_POST['name'];
    $code = $_POST['code'];
    $location = $_POST['location'];

    $query = "INSERT INTO aereoporto (id, name, code, location) VALUES ($id, '$name', '$code', '$location')";


    // Perform query
    if ($result = $mysqli -> query($query)) {
        echo "Created";
    }

    $mysqli -> close();