Javascript Lezione 7

PARTE HTML/JAVASCRIPT
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Async 01</title>
</head>

  <button id="comandaFetch"> FAI PARTIRE LA FETCH  </button>

  <div id="animeCard" style="text-align: center; color: red;">
    <h3 id="titolo"> </h3>
    <img src="" id="cover" width="200px" height="300px">
  </div>

  <div id="factList">

  </div>


  <script>
    document.getElementById('comandaFetch')
      .addEventListener('click', ComandaFetch);

    function ComandaFetch()
    {
      const una_promise =
      fetch('https://anime-facts-rest-api.herokuapp.com/api/v1')
        .then( (rispostaServer) => rispostaServer.json(), /* err => console.log('Errore di connessione') */ )
        .then( (datiRicevuti) =>
          {
            document.getElementById('titolo').textContent = datiRicevuti.data[0].anime_name;
            document.getElementById('cover').src = datiRicevuti.data[0].anime_img;

            return fetch(`https://anime-facts-rest-api.herokuapp.com/api/v1/${datiRicevuti.data[0].anime_name}`);
          }

        )
        .then( (rispostaServer) => rispostaServer.json())
        .then( (datiRicevuti) =>
          {
            const factList = document.getElementById('factList');
            datiRicevuti.data.forEach(fact =>
              {
                factList.insertAdjacentHTML('beforeend', fact.fact+"<br><br>");
              }
            );

          }
        )
        .catch( err => console.log('Problemi con il server o con la connessione') )
        .finally( _ => console.log('io sono sempre eseguita!'))

    }

    //console.log(una_promise);

    const funzione_asincrona = async _ => (await fetch('https://anime-facts-rest-api.herokuapp.com/api/v1')).json();

    funzione_asincrona().then(dati =>
    {
      document.getElementById('titolo').textContent = dati.data[0].anime_name;
      document.getElementById('cover').src = dati.data[0].anime_img;
    });

let cliente = {
  id: 1,
  cognome: "fcamuso",
  eta: 140
}


const formData = new FormData();
Object.entries(cliente).forEach( ele => formData.append(ele[0], ele[1]));
//Object.entries(cliente).forEach( ([chiave, valore]) => formData.append(chiave, valore));


//per local host
fetch('http://localhost/scuola/inserisci_cliente.php', {
      method: "POST",
      mode: "no-cors",
      body: formData,
    },
)
// .then(response => {alert(response); response.json();})
// .then(dati => console.log(dati));


//per server reale su Internet: ovviamente adattate l'indirizzo
fetch('http://www.VOSTRO_SERVER_REALE.net/inserisci_cliente.php', {
      method: "POST",
      body: formData,
    },
)
.then(response => response.json())
.then(dati => console.log(dati));


    //risposta_server.then( risposta_server => console.log(risposta_server));

    // NO solo nei moduli
    // const risposta_server = await fetch('https://anime-facts-rest-api.herokuapp.com/api/v1');
    // risposta_server.then( risposta => console.log(risposta));

  </script>
</body>
</html>


PARTE PHP
  <?php
    $file = fopen('fetch.txt', 'w');
    fwrite($file, "$_POST[id], $_POST[cognome], $_POST[eta] ");
    fclose($file);

    echo json_encode([
      'status' => 200,
      'error' => 'Errore sulla pagina PHP',
      'data' => "vuoto",
    ]);
  ?>