AjaxPost (Ajout d'un article) : Bad Request

Bonjour à tous,

Je rencontre un problème insoluble concernant l'exercice "Ajout d'un article" dans le cours JS.

J'ai essayé par tous les moyens d'envoyer un formulaire sur le serveur "https://oc-jswebsrv.herokuapp.com/article", par désespoir j'ai décidé de faire un test avec le code fournit pour la correction et j'ai encore une erreur 400.

Il me signale une erreur dans la fonction ajaxPost ligne 31 et 43.

J'aurais besoin d'un petit coup de pouce car je pédale dans la purée, voici mon code.

D'avance merci

Mon code HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ajax Article</title>
</head>
<body>
	<h1>Ajout d'un article</h1>
	<form>
		<label for="title">Titre :</label>
		<input type="text" id="title" placeholder="Entrez le titre">
		<br>
		<label for="article">Contenu :</label>
		<br>
		<textarea id="article" row="100" cols="40"></textarea>
		<br>
		<input type="submit" id="submit" value="Ajouter">
	</form>
	<div id="resultat"></div>
    <script src="ajax.js"></script>
    <script src="article.js"></script></body>
</html>

Le code JS issu de la correction :

var form = document.querySelector("form");
form.addEventListener("submit", function(e) {
  e.preventDefault();
  var article = new FormData(form);
  ajaxPost("https://oc-jswebsrv.herokuapp.com/article", article, function(
    reponse
  ) {
    var messageElt = document.createElement("p");
    messageElt.textContent = "L'article a bien été ajouté.";
    document.getElementById("resultat").appendChild(messageElt);
  });
});

Les fonctions Ajax de la correction :

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

EdmondDaoust

4 décembre 2017 à 10:20:09

Walter O'Brien

5 décembre 2017 à 17:49:01

Bonjour,

Tu n'as pas d'attribut name dans champs input et textarea. Cela empêche le FormData de récupérer les données car il n'a pas d'index sur lequel s'appuyer. D'où l'erreur 400 - Bad Request qui t'indique que la requête a atteint l'endpoint mais qu'elle est incorrectement présentée au serveur.

Edit: chez moi ça fonctionne (en utilisant volontairement une syntaxe plus compliquée pour ne pas donner toutes les réponses).

-
Edité par Walter O'Brien 5 décembre 2017 à 18:10:30

7 décembre 2017 à 9:45:24

Super, merci beaucoup

J'ai tout essayé, même la correction me donne une erreur 400!

AjaxPost (Ajout d'un article) : Bad Request

Supprimer

Modérer

Signaler le message aux modérateurs