Bonjour tout le monde,

Je suis à l'activité 3 du cours javascript : http://exercices.openclassrooms.com/assessment/535?id=3306901&slug=creez-des-pages-web-interactives-avec-javascript&login=7130056&tk=1165a1358e1f435751d32ac6e10d844a&sbd=2016-02-01&sbdtk=2466d6bae51e373d89ac8e3f74213199

Je cherche à envoyer les données saisie via la méthode ajaxPost mais j'ai une erreur 400 bas request ...

J'ai essayé en vain plusieurs choses, mais je bloque, j'espere trouver de l'aide ici.

Je vous met le liens codePen pour y voir plus facilement: https://codepen.io/Anduril53/pen/BVexaG?editors=1111

Pour info l'appel de ajaxPost est ligne 187

Merci d'avance 

Bonsoir Eolynas,

Essaie en enlevant la commande e.preventDefault() ligne 223. Personnellement, j'obtiens ce message dans la console : "Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://oc-jswebsrv.herokuapp.com/api/lien. Raison : échec de la requête CORS."

Je ne connais malheureusement pas l'origine de cette erreur... L'aurais-tu également?

Bonne soirée et bon courage!

-
Edité par MaximeVanderwegen 9 juillet 2018 à 22:58:24

Bonjour et merci de ta réponse

Alors personnellement je n'ai pas ce message d'erreur dans ma console.

J'ai essayer de l'enlever pour voir ( ou de le mettre plus haut on ne sais jamais ) mais si je l'enleve ca recharge la page ( ce que je ne veux pas ) et je n'est pas l'impression que ca fonctionne ( je suis pas sur je reste débutant )

Merci encore de ton aide, je vais bien finir par voir d'ou ça proviens

C'est parce que le paramètre titre est manquant.

Merci de ta réponse, mais je comprend pas ce que tu veux dire ...

Il n'y a aucun paramètre titre à mettre si ? et si oui où tu veux que je le mettre ?

C'est le message que le serveur m'avait renvoyé mais en jetant un coup d’œil à l’énoncé de l'exercice j'ai aperçu cette ligne.

L’API d’ajout d’un lien est https://oc-jswebsrv.herokuapp.com/api/lien. Elle attend un objet JSON représentant un lien.

Et donc pour resoudre ton probleme il suffit de rajouter 

data = JSON.stringify(data);
req.setRequestHeader("Content-Type", "application/json");

-
Edité par DevMercenaire 10 juillet 2018 à 15:10:33

Merci encore une fois de ton aide

J'avais tester en mettant cette ligne là

    var nouveauLiens = {
        titre: titre,
        url: url,
        auteur: auteur,
    };
    
    var test = JSON.stringify(nouveauLiens);

et de faire appel à la methode ajax avec comme paramètre "test", ca fait pas la meme chose ?

Et sinon question conne, mais je vois pas où mettre les lignes que tu ma dite ...

-
Edité par Eolynas 10 juillet 2018 à 15:30:19

Juste au dessus de 

req.send(data);

de ta fonction ajaxPost

Tu peux faire comme tu as dit alors il faut rajouter alors seulement

req.setRequestHeader("Content-Type", "application/json")

-
Edité par DevMercenaire 10 juillet 2018 à 15:48:22

Je viens de tester j'ai toujours l'erreur 400 ...

Voici ce que j'ai comme fonction ajaxPost:

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);
	}
    data = JSON.stringify(data);
    req.setRequestHeader("Content-Type", "application/json");
	req.send(data);
}

Pour info j'avais également essayé avec celle ci:

function ajaxPost(url, data, callback) {
    var req = new XMLHttpRequest();
  
    //Dis au serveur que l'on envoi du JSON
    req.open("POST", url);
  
    //Specifie le type de donnée attendu
    req.setRequestHeader("content-type", "application/json");
  
  
    req.addEventListener("load", function () {
        console.log(req);
        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);
    });
  
    //Converti l'objet en Javascript en chaine de caractère au format JSON
    req.send(JSON.stringify(data));
}

Dans codepen.io ça fonctionne chez moi. 

Met l'instruction console comme l'exemple en dessus et montre moi le résultat.

function ajaxPost(url, data, callback, isJson) {
    console.log(data); 
    var req = new XMLHttpRequest();
    req.open("POST", url);

Salut, je vois que nous avons le même problème sur lequel je m'arrache aussi les cheveux.

Si ça peut à trouver la source du problème voici aussi mon code 

Dans mon fichier JS principal j'ai crée on objet newBloc qui avec une fonction pas à l'écran lui donne correctement ses titres, url, auteur. C'est vérifié dans la console à droite avec le console.log ligne 165.

J'ai mon ajaxPost ayant en 4e paramètre "true" pour tout passer en JSON et ça marche pas

Si je le stringify avant de le poster avec le 4e paramètre en "false", j'ai ça :

merci d'avance si quelqu'un a la solution

Tu as une erreur dans le lien, lien sans s  

https://oc-jswebsrv.herokuapp.com/api/lien

Bonjour,

J'ai aussi cette erreur 400, voici mon code si vous avez le temps d'y jeter un coup d'oeil

/* 
Activité 1
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// TODO : compléter ce fichier pour ajouter les liens à la page web



// Activité 1



// Ajout du lien sur la page (en intégrant l'activité 1 dans une fonction)
function addLink() {
    
    // Création des 3 UL avec LI pour les 3 objets du tableau.
var item;
for (var x = 0; x < listeLiens.length; x++) {
    
    var liste = document.createElement('ul');
    liste.classList.add("liste");


    document.getElementById('contenu').prepend(liste);
    
    // Deuxième boucle pour afficher les propriétés des objets.
    for (item in listeLiens[x]) {
        
        var li = document.createElement('li');
        liste.appendChild(li);
        li.innerHTML = listeLiens[x][item];
    }
}

// Style des UL
var classListe = document.getElementsByClassName("liste");

for (var x = 0; x < classListe.length; x++) {
    classListe[x].style.listStyleType = "none";
    classListe[x].style.width = "50%";
    classListe[x].style.padding = "10px 10px";
    classListe[x].style.backgroundColor = "white";
}

// Replacement du first-child (titre) par le lien cliquable.
for (var x = 0; x < classListe.length; x++) {
    // Les variables
    var ulChildren = classListe[x].children[0];
    var ulTexte = ulChildren.textContent;
    var lien = classListe[x].children[1];
    var lienTexte = lien.textContent;
    
    // Création de l'élément
    var a = document.createElement('a');
    a.setAttribute('href', lienTexte);
    a.innerHTML = ulTexte;
    ulChildren.replaceWith(a);
    
    // Le style du lien
    a.style.color = '#428bca';
    a.style.fontWeight = "bold";
    a.style.float = 'left';
    a.style.textDecoration = "none";
    a.style.display = "block";
    a.style.paddingRight = "10px"; 
}

// Ajout du texte (Ajouté par) pour troisième enfant de chaque UL
for (var x = 0; x < classListe.length; x++) {
    var texte = document.createTextNode('Ajouté par ');
    var thirdChildren = classListe[x].children[2];   
    thirdChildren.parentNode.insertBefore(texte, thirdChildren);
    thirdChildren.style.display = 'inline';
    
    // Remettre le tableau vide pour ne pas réafficher les élémentx pré-existants lors de la création d'un nouveau
    listeLiens = [];
    
 }   
}



// Activité 2



// 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 = "";
    });
});



// Activité 3


// Transmission des données POST
    // Nouveau lien affiché qu'en cas de succès

// AjaxPOST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
// Le paramètre isJson permet d'indiquer si l'envoi concerne des données JSON
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);
}















// Réception des données GET

// AjaxGET
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", 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);
    });
    req.send(null);
}

function afficher(reponse) {
    // Tableau d'objets JS
    var liensServeur = (JSON.parse(reponse));
    // Push les éléments dans listeLiens
    liensServeur.forEach(function (liens) {
        
        var getElement = {
            titre: liens.titre,
            url: liens.url,
            auteur: liens.auteur
        };
        
        listeLiens.unshift(getElement);
        addLink();
    });
}

ajaxGet("https://oc-jswebsrv.herokuapp.com/api/liens", afficher);

Merci de ta réponse,

Je vois bien que sur codepen cela fonctionne, mais j'ai toujours la meme erreur avec chrome sur mes fichiers ... là je comprend pas.

J'ai refait un copier coller au cas où ( vu le nombre de modif que j'ai fait ) mais j'ai toujours la meme chose ...

Voici l'erreur en question:

Pour ma part c'est réglé.

J'envoyais mal les données. J'en ai fait un objet et tout bon pour JSON

-
Edité par GrégoryHuyghe 11 juillet 2018 à 8:57:00

Alors pour vous deux, pour commencer qu'est ce que les 2 console.log vous renvoie ?

2 lignes à ajouter au début

function ajaxPost(url, data, callback, isJson) {
    console.log(data);
    console.log(isJson);

-
Edité par DevMercenaire 11 juillet 2018 à 8:58:42

Pour ma part absolument rien ...

J'ai uniquement l'erreur 400 comme sur mon screen plus haut

DevMercenaire a écrit:

Tu as une erreur dans le lien, lien sans s  

https://oc-jswebsrv.herokuapp.com/api/lien

Gros merci à toi DevMercenaire, mon mentor et moi n'avions pas vu la différence entre le lien de récupération et d'envoi et j'avais utiliser le même (avec un s) sur mes deux ajax. Tout marche maintenant !!

Eolynas a écrit:

Pour ma part absolument rien ...

J'ai uniquement l'erreur 400 comme sur mon screen plus haut

Donc la fonction ne reçoit pas ces données.

Post ici le script complet

-
Edité par DevMercenaire 11 juillet 2018 à 12:48:14

Voici ce que j'ai:

Fichier ajax.js

// Exécute un appel AJAX GET
// Prend en paramètres l'URL cible et la fonction callback appelée en cas de succès
function ajaxGet(url, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", 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);
    });
    req.send(null);
}

// Exécute un appel AJAX POST
// Prend en paramètres l'URL cible, la donnée à envoyer et la fonction callback appelée en cas de succès
function ajaxPost(url, data, callback, isJson) {
    console.log(data);
    console.log(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);
	}
    data = JSON.stringify(data);
    req.setRequestHeader("Content-Type", "application/json");
	req.send(data);
}


/*
function ajaxPost(url, data, callback) {
    var req = new XMLHttpRequest();
  
    //Dis au serveur que l'on envoi du JSON
    req.open("POST", url);
  
    //Specifie le type de donnée attendu
    req.setRequestHeader("content-type", "application/json");
  
  
    req.addEventListener("load", function () {
        console.log(req);
        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);
    });
  
    //Converti l'objet en Javascript en chaine de caractère au format JSON
    req.send(JSON.stringify(data));
}
*/

 fichier liensweb.js

/* 
Activité 2
*/

// Liste des liens Web à afficher. Un lien est défini par :
// - son titre
// - son URL
// - son auteur (la personne qui l'a publié)
var listeLiens = [
    {
        titre: "So Foot",
        url: "http://sofoot.com",
        auteur: "yann.usaille"
    },
    {
        titre: "Guide d'autodéfense numérique",
        url: "http://guide.boum.org",
        auteur: "paulochon"
    },
    {
        titre: "L'encyclopédie en ligne Wikipedia",
        url: "http://Wikipedia.org",
        auteur: "annie.zette"
    }
];

// TODO : compléter ce fichier pour ajouter les liens à la page web


var Elements = function (lien) {
    // Création du titre en couleur
    var aElt = document.createElement("a")
    aElt.href = lien.url;
    aElt.style.color = "#428bca";
    aElt.textContent = lien.titre;
    aElt.style.marginRight = "7px";
    aElt.style.textDecoration = "none";
    // Création du lien
    var urlElt = document.createElement("span");
    urlElt.textContent = lien.url;
    
    // On ajoute le titre et le lien sur la meme ligne
    var titreElt = document.createElement("h2")
    titreElt.appendChild(aElt);
    titreElt.appendChild(urlElt);
    // Création de l'auteur
    var auteurElt = document.createElement("p")
    auteurElt.appendChild(document.createTextNode("Ajouté par " + lien.auteur))
    
    // Création de la div
    var divElt = document.createElement("div");
    divElt.classList.add("lien");
    divElt.appendChild(titreElt);
    divElt.appendChild(auteurElt);
    
    
    return divElt;
}

// Nettoie le html et rajoute dans le DOM les élements
function rafraichirListe() {
  
   var conteneur = document.getElementById("liens")
   while (conteneur.hasChildNodes()) {
     conteneur.removeChild(conteneur.lastChild)
   }
  
  // Ajout des liens dans la div "liens"
  listeLiens.forEach(function (lien){
      conteneur.appendChild(Elements(lien));              
  });
}

//Ajout du div pour englober tout les liens
var liensElt = document.createElement("div");
liensElt.id = "liens";
document.getElementById("contenu").appendChild(liensElt);

rafraichirListe()

// Appel de la fonction AJAX

ajaxGet("https://oc-jswebsrv.herokuapp.com/api/liens", function (reponse) {
    // Transforme la réponse en tableau d'objets JavaScript
    var liens = JSON.parse(reponse);
    // On envoie les données dans le tableau
    //listeLiens.unshift(liens)
    // Affiche le titre de chaque film
    liens.forEach(function (lien) {
        listeLiens.unshift(lien)
        //console.log(lien);
    })
    //On affiche le tableau
    rafraichirListe()
});

// création de la variable pour le formulaire
var formElt = document.getElementById("formulaire");
var formInputElt = document.getElementById("forminput")
    
// On fait apparaitre le formulaire lors de l'event click sur le bouton
var buttonElt = document.getElementById("bouton");
buttonElt.addEventListener("click", function(){
    buttonElt.style.display = "none";
    formElt.style.display = "block";
    formInputElt.style.display = "block";


})

// On stock en variable les elements du formulaire
var nomElt = document.getElementById("nom");
var titreElt = document.getElementById("titre");
var urlElt = document.getElementById("url");

// On recupere les valeurs lors de l'event submit
var ajouterElt = document.getElementById("ajouter");
formElt.addEventListener("submit", function(e){
    var auteur = nomElt.value;
    var titre = titreElt.value;
    var url = urlElt.value;
    
    // On verifie la présence de http ou http
     
    if(url.indexOf("http://") === -1 && url.indexOf("https://") === -1  ){
        url = "http://" + url;
    }
    
    
    // Création de l'objet 
    /*
    var nouveauLiens = Object.create(listeLiens);
    nouveauLiens.auteur = auteur;
    nouveauLiens.titre = titre;
    nouveauLiens.url = url;
    */
    var nouveauLiens = {
        auteur: auteur,
        titre: titre,
        url: url,
    };
    
    //var nouveauLiensJson = JSON.stringify(nouveauLiens);
    
    //var envoieJson = new FormData();
    //envoieJson.append(nouveauLiensJson);
    
    // Envoi de l'objet FormData au serveur
    ajaxPost("https://oc-jswebsrv.herokuapp.com/api/lien", nouveauLiens,
    function (reponse) {
        //On vide les liens du DOM
        liensElt.textContent = ""
        
        // on rappel le tableau
        listeLiens.forEach(function (liens){
        document.getElementById("liens").appendChild(Elements(liens));              

        })
        // Afficher pendant 2s le message de confirmation
        formInputElt.style.display="none";
     
        var p2FormElt=document.createElement("p");
            p2FormElt.textContent='Le lien "' + titre + '" a bien été ajouter ';
            p2FormElt.style.width="40%";
            p2FormElt.style.backgroundColor="#D6ECF6";
            p2FormElt.style.color="#428BCA";
            p2FormElt.style.padding="20px 0";
            p2FormElt.style.fontSize="20px";
            document.querySelector("form").appendChild(p2FormElt);

        // On vide les champs du formulaire

        nomElt.value = "";
        titreElt.value = "";
        urlElt.value = "";

        
        setTimeout(function(){
            p2FormElt.style.display="none";
            buttonElt.style.display="block";
            },2000);
        
        // Affichage dans la console en cas de succès
        console.log("Commande envoyée au serveur");
    });
    e.preventDefault()
})

Remplace la ligne 185 par

  }, true);

ohhhhh merciiiiii !!!

Ca fonctionne nickel

Par contre petite question, ca à fait quoi au juste ?

La fonction 

function ajaxPost(url, data, callback, isJson)

attend 4 arguments et tu appels ajaxPost avec 3 arguments

-
Edité par DevMercenaire 11 juillet 2018 à 13:53:32

De plus, ton paramètre "isJson" étant alors "true", ta fonction ajaxPost va convertir ton nouveauLien d'objet JS à chaîne JSON avant de l'envoyer (voir lignes 38-43 de ton ajax.js).

Ainsi les données envoyées sont acceptées par le serveur.

-
Edité par Laurent Prevaut 11 juillet 2018 à 14:25:53

Merci à vous pour les précision, je peux enfin avancer