Récupérer et afficher des données

Version imprimable

Bonjour,
je viens de commencer d'apprendre et de comprendre l'AJAX en m'aidant de cours et video etc.
J'essaie un exercice mais je n'arrive pas à trouver l'erreur : quand je clique sur une des deux villes, dans la div en sous je voudrais afficher le code de la page php.. mais rien se passe
Voici mes codes :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 function getxhr()
 {
    return new XMLHttpRequest(); 
 }
 
 
let links = document.querySelectorAll('.meteo')
let result =document.querySelector('result')
 
for(let i = 0; i < links.length; i++) {
   let link = links[i]
   link.addEventListener('click', function (e) {
      e.preventDefault();
      result.innerHTML="chargement"
 
      let req = getxhr();
 
      req.onreadystatechange = function()
      {
         if(req.readyState==4 && req.status==200)
         {
         result.innerHTML=req.responseText;
         }
      }
 
         req.open('GET', this.getAttribute('href'), true);
 
         req.send();
 
      })
}

Mon html

Code:

1
2
3
4
5
6
7
8
<body>
    <ul>
     <li><a class="meteo" href="ville.php?ville=Paris">Paris</a></li>
     <li><a class="meteo" href="ville.php?ville=Rennes">Rennes</a></li>
    </ul>  
    <div id="result"></div>
    <script src="monApp.js"></script>
</body>

php

Code:

1
2
3
4
<?php 
$ville =$_GET['ville'];
echo 'il fait beau a '.$ville;
?>

merci pour votre aide

08/10/2022, 12h07
mathieu

regardez dans la console de développement de votre navigateur, vous avez une erreur javascript.

une fois que vous aurez corrigé cette erreur, l'appel ajax fonctionnera. mais si vous voulez pousser l'exercice un peu plus loin, je vous propose de ne plus utiliser XMLHttpRequest mais de refaire l'appel ajax avec la fonction fetch :
https://developer.mozilla.org/fr/doc...PI/Using_Fetch
cette fonction est plus récente et je pense que votre code sera plus clair en l'utilisant.
08/10/2022, 13h02
Matteo53
Bonjour,
La prochaine fois je ferai appel à la console avant de poster sur le forum, en étant débutant je n'ai pas ce reflexe.
Problème résolu sur les deux lignes:
Code:

1 2 3 let result =document.getElementById("result") result.innerHTML="chargement"
Merci pour votre conseil je vais lire la documentation sur cette fonction.
Bonne journée