Bonjour,

Je suis à l'activité 3 du cours "Créez des pages web interactives avec JavaScript" et rencontre deux problèmes :

- Bien récupérer les données à envoyer

- Réussir à envoyer les données au serveur

Voici la fonction AjaxPost, celle du cour :

function ajaxPost(url, data, callback, isJson) {
    var req = new XMLHttpRequest();
    req.open("POST", url);
    req.addEventListener("load", function () {
        if (req.status >= 200 && req.status < 400) {
            // Appelle la fonction callback en lui passant la réponse de la requête
            callback(req.responseText);
        } else {
            console.error(req.status + " " + req.statusText + " " + url);
        }
    });
    req.addEventListener("error", function () {
        console.error("Erreur réseau avec l'URL " + url);
    });
    if (isJson) {
        // Définit le contenu de la requête comme étant du JSON
        req.setRequestHeader("Content-Type", "application/json");
        // Transforme la donnée du format JSON vers le format texte avant l'envoi
        data = JSON.stringify(data);
    }
    req.send(data);

Et toute la partie formulaire avec envoi des données :

Mon idée a ici était de récupérer l'objet newElement (initialement destiné au tableau d'objets listeLiens) pour l'envoyer avec formData(). Mais est-ce que le code est bon ? Est-ce que je dois rajouter des data.append ?

// Masquer formulaire
document.forms["myForm"].style.display = "none";


//Montrer formulaire au clic
document.querySelector("button").addEventListener("click", function () {
    document.forms["myForm"].style.display = "initial";
    document.getElementById('addBtn').style.display = "none";
});

// Ajouter un nouveau lien
document.addEventListener("DOMContentLoaded", function () {
    addLink();

    document.forms["myForm"].addEventListener("submit", function (event) {
        //Empêcher l'envoi des données du formulaire
        event.preventDefault();

        //Vérifier la présence de Http
        if (!/^https?:\/\//.test(document.forms["myForm"]["lien"].value))  {
            document.forms["myForm"]["lien"].value = "http://" + document.forms["myForm"]["lien"].value;
        }

        // Dissimuler à nouveau le formulaire                                              
        document.forms["myForm"].style.display = "none";

        //Création du nouvel objet
        var newElement = {
            titre: document.forms["myForm"]["titre"].value,
            url: document.forms["myForm"]["lien"].value,
            auteur: document.forms["myForm"]["auteur"].value
        };

        // Insertion du nouvel objet dans le array
        //listeLiens.unshift(newElement);

        // Appel de la fonction pour insérer ce nouvel objet sur la page
        addLink();
        
        // Vers le serveur
        //var form = document.getElementById("submit");
        // Gestion de la soumission du formulaire
        //form.addEventListener("submit", function (e) {
            //e.preventDefault();
            // Récupération des champs du formulaire dans l'objet FormData
            var data = new FormData(newElement);
            // Envoi des données du formulaire au serveur
            //data.append('titre', 'document.forms["myForm"]["titre"].value');
            //data.append('url', 'document.forms["myForm"]["lien"].value');
            //data.append('auteur', 'document.forms["myForm"]["auteur"].value');

            ajaxPost("https://oc-jswebsrv.herokuapp.com/api/lien", data, function () {}, true);
        //});
        
        

        // Message de confirmation de création + timer
        document.querySelector("h1").after(document.createElement("p").appendChild(document.createTextNode("Le lien a bien été ajouté !")));

        setTimeout(function () {
            document.querySelector("h1").nextSibling.remove();
            showBtn();
        }, 2000);
        
        function showBtn() {
            document.getElementById('addBtn').style.display = "initial";
        }

        // Réinitialisation des value des champs du formulaire
        document.forms["myForm"]["titre"].value = "";
        document.forms["myForm"]["lien"].value = "";
        document.forms["myForm"]["auteur"].value = "";
    });
});

Merci