Hola !

Je bloque à ce chapitre.

Je comprends vraiment rien à ce qu'il faut faire.

L'exercice :

Dans cet exercice nous voulons pouvoir entrer du texte dans le formulaire et l'envoyer vers un service web. Ce service web va simplement nous renvoyer notre contenu en plus d'autres informations et nous allons afficher le contenu renvoyé par le serveur.

1. Nous allons commencer par créer une fonction appelée send et qui va créer notre objet AJAX.

   Nous souhaitons créer une requête de type POST vers l'adresse suivante : https://mockbin.com/request, et y envoyer un contenu JSON ayant une propriété value qui contiendra la valeur du champ de saisie de la page (avec l'ID value). Par exemple : {value: document.getElementById("value").value}.

   Nous souhaitons aussi, lorsque la requête s'est bien envoyée, afficher le résulat renvoyé par le service web. Pour ce faire, nous allons afficher ce qui se trouve dans postData.text de la réponse dans le contenu HTML de l'élément ayant pour ID result.

2. Maintenant nous voulons envoyer notre requête, et donc appeler notre fonction send dès que nous soumettons le formulaire ayant pour ID form.

   N'oubliez pas d'annuler le comportement par défaut de la soumission du formulaire, sinon votre page va se recharger

Mon code (qui affiche une erreur) :

function Send(){
  let request = new XMLHttpRequest();
  request.open('POST', 'https://mockbin.com/request');
  request.setRequestHeader('Content-Type', 'application/json');
  request.send(JSON.stringify(document.getElementById("value").value));
} 

document.getElementById('submit').addEventListener('click',function(){
  Send();
})
                                                   

Quelqu'un pour m'aider ?

-
Edité par inoual 16 octobre 2020 à 18:23:45

Bonjour,

J'étais aussi bloqué à ce chapitre et suis tombé sur ce post,

Du coup, je ne sais pas s'il est résolu.

Bonjour, le JSON.stringify sur une chaîne de caractère ( d'autant plus venant d'un champs de formulaire ) et assez douteux..

JSON.stringify(document.getElementById("value").value)

Si tu as besoin d'envoyé le contenu d'un champs de formulaire dans un format JSON tu devrait le placé dans la valeur d'une clés JSON

const data = {

  value: document.getElementById("value").value
};

JSON.stringify( data );

JSON.stringify convertit un object JSON en un format chaîne de caractère minimifié tu doit faire un JSON.stringify sur un object JSON

dans le reste du code il manque les écouteurs de réponse de la requête, avec les request.onreadystatechange

Bonjour, 

Pour ceux qui n'arrive pas a trouver la solution, voila ce que j'ai trouvé, Si quelqu'un pouvait me confirmer que c'est la bonne réponse, ca serait parfait 

RE : Malheureusement je n'arrive pas a poster le code, si quelqu'un a la solution a se problème je suis preneur

-
Edité par ClementGerardin 1 février 2021 à 11:30:18

Bonjour je vais mettre ma contribution plutôt que d'ouvrir un post de plus, pour cet exercice (cela vaut pour les autres exercices de ce tutoriel)

Écrivez du JavaScript pour le web.

j'ai adapté un code trouvé dans un fichier JS externe avec une fonction qui teste la compatibilité de l'objet Ajax, XMLHttpRequest, selon les navigateurs surtout IE :

var getHttpRequest = function () {
  var httpRequest = false;

  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    httpRequest = new XMLHttpRequest();
    if (httpRequest.overrideMimeType) {
      httpRequest.overrideMimeType('text/xml');
    }
  }
  else if (window.ActiveXObject) { // IE
    try {
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      try {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) {}
    }
  }

  if (!httpRequest) {
    alert('Abandon  Impossible de créer une instance XMLHTTP');
    return false;
  }

  return httpRequest
}

//Exporting variables and functions
export {getHttpRequest};

ici le code (sans la fonction ci dessus) pour l'exercice :

https://codepen.io/mitakuye/pen/PobVLXd

En tout cas ça me dérange vraiment qu'il n'y ait pas de correction car j'ai vu sur beaucoup de post, diverses manières de résoudre, diverses manières de coder donc impossible de savoir qui a le code le plus propre.

Donc quant on a jamais codé comme mon cas, en Ajax, Json voir JS, le nombre d'infos, notions, concepts à analyser dans la console est déconcertantes.
Sans correction j'ai donc fini par abandonner même de lire tous les résultats de la console du navigateur car s'y perdre serait pire à mon avis déjà que je ne sais même pas si mon code est propre meme s'il fonctionne.

De plus il m'a fallu faire ou voir d'autres tutoriels bien plus compliqué pour résoudre ce seul exo c'est signe à mon avis qu'il manque des infos pédagogiques pour ce tuto. Alors c'est très bien de chercher mais là sans correction c'est vraiment beaucoup trop pour risquer de se perdre.

C'est mon avis sur ce cours et sur cet exo et vous ?

Quel est votre avis sur mon code de l'exo ?

Je n'ai pas encore l'habitude de faire des variables-fonctions et inclusives. Je découpe mon code avec des variables seules partout, je les initialise souvent avec des noms de fonctions, je met beaucoup de test console ou alert,...

En espérant ne pas avoir été trop "verbeux"

-
Edité par mitakuye 14 mars 2021 à 9:27:10

Hello, 

Comme beaucoup d'entre vous, je trouve que le cours n'est pas suffisamment bien écrit et qu'il ne permet pas à lui seul une bonne compréhension de l'exercice.

Je vous partage ma correction :

const submitBtn = document.querySelector('input[type="submit"]');
const resultDiv = document.getElementById("result");

function send() {
  let request = new XMLHttpRequest();
  request.open("POST", "https://mockbin.com/request");
  request.setRequestHeader("Content-Type", "application/json");
  request.send(JSON.stringify(document.getElementById("value").value));

  request.onreadystatechange = function () {
    if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
      let response = JSON.parse(request.responseText);
      resultDiv.textContent = response.postData.text;
    }
  };
}

submitBtn.addEventListener("click", function (event) {
  event.preventDefault();
  send();
});

Et pour ceux qui trouvent cet exercice encore trop flou malgré la correction, je vous propose de lire une deuxième version de cette correction. Elle est plus imagée, et j'ai également pris le soin de la commenter : https://codepen.io/jeireme/pen/dyNeJzr

Bon courage à tous ! 

-
Edité par Jeireme 14 avril 2021 à 18:28:25